表格中图像下方的额外空白 - html 电子邮件

Question

我有一个用于响应式电子邮件设计的模块，它会在我的图像下方插入少量空白，但我不明白为什么。图像的比例或大小似乎无关紧要。始终保持相同的空间量。

我内联了我所有的 CSS - 类声明仅用于@media 查询。我已经将

padding-bottom: 0; border:0; border-collapse:collapse;

添加到任何我能想到的以某种方式包含该图像的东西，似乎没有任何东西以任何方式改变结果......

这是问题的截图。你可以看到她照片下方的小空白。

<table style="background-color:grey">
  <tr>
    <td style="padding-left: 25px; padding-right:25px; padding:bottom:0px!important; border:0!impotant;">
      <table class="oneup50" align="center" valign="middle" style="width: 100%; vertical-align: middle; background-color: #FFFFFF; border:0; padding-bottom: 0; border-collapse: collapse!important;" role="presentation" dir="ltr">
        <tr>
          <td class="stackB" style="padding-bottom:0!important; display: inline-block!important; border:0!important; border-collapse:collapse!important;">
            <table>
              <tr>
                <td style="padding: 0;">
                  <a href="URL"><img width="287" class="imgStack" style="border: 0;" src="https://i.imgur.com/I1d9YPY.png"></a>
                </td>
              </tr>
            </table>
          </td>
          <td class="stack" valign="middle" align="center" width="263" style="height:219px; border:0; padding-bottom: 0; display: inline-block; vertical-align: middle!important;">
            <table role="presentation" valign="middle" style="border: 0; vertical-align: middle; display:inline-block;">
              <tr>
                <td valign="middle" style="width:47%; vertical-align: middle; padding:0;" height="218">
                  <table style="display:inline-block;">
                    <tr>
                      <td style="padding: 0;">
                        <center>
                          <h2 style="padding: 0 15% 0 15%; margin:0; font-family: 'Arial'; font-size: 12pt; color: #002855; line-height: 14pt; font-weight: bold; text-align: middle;">
                            How mindful are you?
                          </h2>
                          <p style="padding: 0 15% 10px 15%; font-family: 'Arial'; font-size: 10pt; line-height: 12pt; color: #63666a;">
                            See if your habits and attitudes are helping you be more present and purposeful.
                          </p>
                          <a class="button" rel="noopener" target="_blank" href="URL" style="background-color: #1a7ead; font-size: 12px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; text-decoration: none; padding: 14px 40px; color: #ffffff; display: inline-block; mso-padding-alt: 0;">
                            <!--[if mso]>
    <i style="letter-spacing: 25px; mso-font-width: -100%; mso-text-raise: 30pt;">&nbsp;</i>
    <![endif]-->
                            <span style="mso-text-raise: 15pt;">Take the quiz</span>
                            <!--[if mso]>
    <i style="letter-spacing: 25px; mso-font-width: -100%;">&nbsp;</i>
    <![endif]-->
                          </a>
                        </center>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Answer 1

感谢这篇文章，我明白了：div 中的图像在图像下方有额外的空间

设置图像本身显示：块固定它！