Gmail自定义邮件签名模板1px边框间隙问题求助

问题场景 #

自定义的Gmail邮件签名粘贴保存后，出现1px的边框间隙，尝试负margin修复无效。

修复思路 #

Gmail客户端对inline元素和flex布局的渲染逻辑特殊，图片默认作为inline元素会产生基线间隙，flex对齐方式也会加剧这个问题，针对这些核心点调整：

• 给图片设置display: block，消除inline元素自带的基线间隙
• 用position: relative; left: -1px替代负margin，精准覆盖图片右侧的边框间隙
• 将flex容器的align-items设为stretch，让子元素高度完全匹配，避免垂直方向出现缝隙
• 移除冗余的边框定义，避免重复渲染导致的视觉误差

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>HTML + CSS</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div style="
        font-family: Arial, sans-serif;
        color: #333333;
        width: 400px;
        padding: 10px;
        background-repeat: no-repeat;
        background-size: cover;
      ">
    <div style="margin-bottom: 10px">
      <div style="display: flex; align-items: center; gap: 10px">
        <div style="
              width: 25px;
              height: 25px;
              background-color: #005599;
              color: #005599;
            ">
          .
        </div>
        <div style="font-size: 13px; font-weight: bold; color: #005599">
          Omar Al Jabir
        </div>
        <div style="
              font-size: 12px;
              color: #ffffff;
              background-color: #005599;
              padding: 5px 15px;
              min-width: 150px;
              text-align: center;
            ">
          Business Development Manager
        </div>
      </div>
    </div>
    <div style="display: flex; align-items: stretch">
      <img style="display: block; border-right: 1px solid #1186c8" src="https://i.imgur.com/bvDQt2e.png" alt="gplex" />

      <div style="
            background-color: #1186c8;
            color: #ffffff;
            font-size: 10px;
            line-height: 1.2em;
            width: 210px;
            padding: 10px 5px;
            position: relative;
            left: -1px;
          ">
        <div>
          <p style="margin-bottom: 5px; font-size: 14px">
            Genuity Systems Ltd.
          </p>
          <p style="margin: 0">Genusys Point</p>
          <p style="margin: 0">Plot-8, Road-4, Block-A, Section 11</p>
          <p style="margin: 0">Mirpur, Dhaka -1216 Bangladesh</p>

          <table border="0" cellpadding="1px" cellspacing="0">
            <tr>
              <td>Telephone</td>
              <td>:</td>
              <td>+(880) 9611 888 444</td>
            </tr>
            <tr>
              <td>Mobile</td>
              <td>:</td>
              <td>+8801713364648</td>
            </tr>
            <tr>
              <td>Web</td>
              <td>:</td>
              <td style="color: #ffffff">www.genuitysystems.com</td>
            </tr>
          </table>
        </div>
      </div>
    </div>

    <div style="
          background-color: #1186c8;
          width: 400px;
          padding: 5px;
          margin-top: 0;
          display: flex;
          align-items: center;
        ">
      <div>
        <a href="https://facebook.com" target="_blank" style="text-decoration: none; margin-right: 10px">
          <img src="https://imgur.com/LVVC5Lb.png" alt="" />
        </a>
        <a href="https://youtube.com" target="_blank" style="text-decoration: none; margin-right: 10px">
          <img src="https://imgur.com/zunod2B.png" alt="" />
        </a>
        <a href="https://instagram.com" target="_blank" style="text-decoration: none; margin-right: 10px">
          <img src="https://imgur.com/6Z3TdL5.png" alt="" />
        </a>
        <a href="https://whatsapp.com" target="_blank" style="text-decoration: none">
          <img src="https://imgur.com/zunod2B.png" alt="" />
        </a>
      </div>
    </div>
  </div>
</body>
</html>

内容的提问来源于stack exchange，提问作者Momin