table 中每个 td 元素底部的奇怪间隙

Question

我正在为一个相当复杂的客户编写电子邮件签名。我让它工作了一段时间，但是一旦 table 添加到 HTML 文档，或者添加到电子邮件中，每个 td 元素都会在底部留下一个 2px 高的小间隙，我想不通为什么。

我试过从每个元素中删除填充，将边框、单元格间距和单元格填充设置为零，并在所有形式中使用边框折叠，但它仍然存在。我已经在 outlook 和 gmail

上测试过了

这是我的代码：

<table border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td style="padding: 0;">
        <table border="0" cellspacing="0" cellpadding="0">
          <tbody>
            <tr>
              <td style="padding: 0;"><img src="https://i.imgur.com/EEtSUAZ.png" alt=""></td>
              <td style="padding: 0;"><img src="https://i.imgur.com/oVtLVTQ.png" alt=""></td>
            </tr>
          </tbody>
        </table>
        <table border="0" cellspacing="0" cellpadding="0">
          <tbody>
            <tr>
              <td style="padding: 0;"><img src="https://i.imgur.com/FPEK7C5.png"></td>
              <td style="padding: 0;">
                <table border="0" cellspacing="0" cellpadding="0">
                  <tbody>
                    <tr style="padding: 0px">
                      <td style="padding: 0px"><img style="padding: 0px" src="https://i.imgur.com/i6oxWv2.png" alt=""></td>
                    </tr>
                    <tr style="padding: 0;">
                      <td style="padding: 0;">
                        <img style="display: inline-block; padding: 0; " src="https://i.imgur.com/xls8Dzw.png" alt=""><img style="display: inline-block; padding: 0; " src="https://i.imgur.com/8LXaDm9.png" alt=""><img src="https://i.imgur.com/oNlsMC5.png"
                          alt=""><img style="display: inline-block; padding: 0; " src="https://i.imgur.com/As0jrfW.png" alt=""><img style="display: inline-block; padding: 0; " src="https://i.imgur.com/CYHdJvo.png" alt="">
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
        <table border="0" cellspacing="0" cellpadding="0">
          <tbody>
            <tr>
              <td style="padding: 0px;"><img src="https://i.imgur.com/6kRuewh.png"></td>
              <td style="padding: 0"><img src="https://i.imgur.com/udCX3oG.png"></td>
            </tr>
          </tbody>
        </table>
      </td>
      <td style="padding: 0"><img src="https://i.imgur.com/JMKi3B4.png"></td>
      <td style="padding: 0;">
        <table border="0" cellspacing="0" cellpadding="0">
          <tbody>
            <tr>
              <td style="padding: 0;"><img style=" padding: 0;" src="https://i.imgur.com/E2VTXtu.png" alt=""></td>
            </tr>
            <tr>
              <td style="padding: 0; padding-top: 2px;"><img style="display: inline-block; padding: 0;" src="https://i.imgur.com/jHewI2N.png" alt="">
                <p style="display: inline-block; margin: 0px; font-size: 12px">+27 67 470 1707</p>
              </td>
            </tr>

            <tr>
              <td style="padding: 0; font-size: 12px"><img style="display: inline; padding: 0;" src="https://i.imgur.com/OHv1pLT.png" alt="">
                <p style="display: inline-block; margin: 0px;">www.talent10.com<br>info@talent10.com</p>
              </td>
            </tr>

            <tr>
              <td style="padding: 0; padding-bottom: 2px; font-size: 12px">
                <img style="display: inline-block; padding: 0;" src="https://i.imgur.com/j7GoHc4.png" alt="">
                <p style="display: inline-block; margin: 0px;">Maxwell Office Park, Building 1,<br>Magwa Cres, Waterval City</p>
              </td>
            </tr>
            <tr>
              <td style="padding: 0;"><img src="https://i.imgur.com/PwXiL1L.png" alt=""></td>
            </tr>
          </tbody>
        </table>
      </td>
      <td style="padding: 0;">
        <img style="display: inline-block; padding: 0;" src="https://i.imgur.com/iXbYCq9.png" alt="">
      </td>
    </tr>
  </tbody>
</table>

Answer 1

对 <td> 使用 font-size: 0px; line-height: 0px; 样式来防止额外的间隙（而不是 padding: 0:）。需要准确使用 0px，而不仅仅是 0.
删除 table 单元格内 HTML 标签之间的空格和新行符号，以防止带有 display: inline-block.
简化 table 结构。
对具有相同作用的相同标签使用相同的样式 ;)

所以我现在看不到任何额外的空格。但是，包含联系信息的列变得太低了。但这是下一个任务。

<table border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td style="font-size: 0px; line-height: 0px;">
        <table border="0" cellspacing="0" cellpadding="0">
          <tbody>
            <tr>
              <td style="font-size: 0px; line-height: 0px;"><img src="https://i.imgur.com/EEtSUAZ.png" alt=""></td>
              <td style="font-size: 0px; line-height: 0px;"><img src="https://i.imgur.com/oVtLVTQ.png" alt=""></td>
            </tr>
            <tr>
              <td style="font-size: 0px; line-height: 0px;"><img src="https://i.imgur.com/FPEK7C5.png"></td>
              <td style="font-size: 0px; line-height: 0px;">
                <table border="0" cellspacing="0" cellpadding="0">
                  <tbody>
                    <tr>
                      <td style="font-size: 0px; line-height: 0px;"><img src="https://i.imgur.com/i6oxWv2.png" alt=""></td>
                    </tr>
                    <tr>
                      <td style="font-size: 0px; line-height: 0px;"><img style="display: inline-block;" src="https://i.imgur.com/xls8Dzw.png" alt=""><img style="display: inline-block;" src="https://i.imgur.com/8LXaDm9.png" alt=""><img src="https://i.imgur.com/oNlsMC5.png" alt=""><img style="display: inline-block;" src="https://i.imgur.com/As0jrfW.png" alt=""><img style="display: inline-block;" src="https://i.imgur.com/CYHdJvo.png" alt=""></td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
            <tr>
              <td style="font-size: 0px; line-height: 0px;"><img src="https://i.imgur.com/6kRuewh.png"></td>
              <td style="font-size: 0px; line-height: 0px;"><img src="https://i.imgur.com/udCX3oG.png"></td>
            </tr>
          </tbody>
        </table>
      </td>
      <td style="font-size: 0px; line-height: 0px"><img src="https://i.imgur.com/JMKi3B4.png"></td>
      <td style="font-size: 0px; line-height: 0px;">
        <table border="0" cellspacing="0" cellpadding="0">
          <tbody>
            <tr>
              <td style="font-size: 0px; line-height: 0px;"><img src="https://i.imgur.com/E2VTXtu.png" alt=""></td>
            </tr>
            <tr>
              <td style="font-size: 0px; line-height: 0px;"><img style="display: inline-block; vertical-align: middle; font-size: 0px; line-height: 0px;" src="https://i.imgur.com/jHewI2N.png" alt=""><p style="display: inline-block; vertical-align: middle; margin: 0px; font-size: 12px; line-height: 12px;">+27 67 470 1707</p></td>
            </tr>
            <tr>
              <td style="font-size: 0px; line-height: 0px;"><img style="display: inline-block; vertical-align: middle; font-size: 0px; line-height: 0px;" src="https://i.imgur.com/OHv1pLT.png" alt=""><p style="display: inline-block; vertical-align: middle; margin: 0px; font-size: 12px; line-height: 12px;">www.talent10.com<br>info@talent10.com</p></td>
            </tr>
            <tr>
              <td style="font-size: 0px; line-height: 0px;"><img style="display: inline-block; vertical-align: middle; font-size: 0px; line-height: 0px;" src="https://i.imgur.com/j7GoHc4.png" alt=""><p style="display: inline-block; vertical-align: middle; margin: 0px; font-size: 12px; line-height: 12px;">Maxwell Office Park, Building 1,<br>Magwa Cres, Waterval City</p></td>
            </tr>
            <tr>
              <td style="font-size: 0px; line-height: 0px;"><img src="https://i.imgur.com/PwXiL1L.png" alt=""></td>
            </tr>
          </tbody>
        </table>
      </td>
      <td style="font-size: 0px; line-height: 0px;"><img src="https://i.imgur.com/iXbYCq9.png" alt=""></td>
    </tr>
  </tbody>
</table>

table 中每个 td 元素底部的奇怪间隙

Strange gap at the bottom of every td element in a table

html

css

email

html-table