删除 HTML 电子邮件中表格行之间的间距答案

【问题标题】：Remove spacing between table rows in HTML email删除 HTML 电子邮件中表格行之间的间距
【发布时间】：2019-02-06 18:48:01
【问题描述】：

首先让我说我很久没有构建 HTML 电子邮件了；我已经被 CSS 宠坏了太久了，所以回到用表格来构建东西是非常令人沮丧的。我很难让两排彼此齐平；无论我尝试了什么，都有一个我无法消除的差距。在 S.O. 上搜索其他帖子只产生我已经尝试过但没有奏效的解决方案。大约 40% 的目标受众在 Outlook 上查看电子邮件，这意味着 CSS 支持非常有限。我尝试过的事情：

border-collapse:collapse（我从一开始就默认设置好了）
设置边距：0（几乎无处不在）
cellspacing 和 cellpadding 为零（我在构建表格时已经默认这样做了）。
display:block 和 display:inline-block（Outlook 并不真正支持，但无论如何也没有解决我的问题）。

这是我的代码 sn-ps（忽略任何 CSS 类；同样还没有任何嵌入式 CSS，此时这些只是占位符。任何嵌入式 CSS 将主要用于处理特定于电子邮件客户端的问题。）

<!--2 Column Layout : BEGIN-->
<tr>
  <td align="center" valign="top" style="text-align: center; padding:0px; border-width:0px; margin:0px;">
    <table cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse:collapse; border:0px; border-spacing:0px;">
      <tr>
        <td class="stack-column-center" style="text-align: center; padding:0px; border-width:0px; margin:0px;">
          <table cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse; border:0px; border-spacing:0px;">
            <tr>
              <td style="text-align: center; padding:0px; border-width:0px; margin:0px;">
                <img src="http://i1024.photobucket.com/albums/y303/aadBresco/monkey_wrench_zpstk6rgf3j.png" width="300" alt="Monkey Wrench" border="0" class="fluid">
              </td>
            </tr>

          </table>
        </td>

        <td class="stack-column-center" style="text-align: center; padding:0px; border-width:0px; margin:0px;">
          <table cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse; border:0px; border-spacing:0px;">
            <tr>
              <td style="text-align: center; padding:0px; border-width:0px; margin:0px;">
                <img src="http://i1024.photobucket.com/albums/y303/aadBresco/auto_parts_zpsf1bs9tgv.png" width="300" alt="Auto Parts" border="0" class="fluid">
              </td>
            </tr>

          </table>
        </td>
      </tr>
    </table>
  </td>
</tr>
<!--2 Column Layout : END-->

<!--2nd Hero Image : BEGIN-->
<tr>
  <td class="full-width-image">
    <img src="http://i1024.photobucket.com/albums/y303/aadBresco/sliced-bread_zpsxt8z6pjt.png" width="600" alt="Sliced Bread" border="0" align="center" style="width: 100%; max-width: 600px; height: auto;">
  </td>
</tr>
<!--Hero Image : END-->

如果您仔细观察，可以看到行底部的小间隙。它的高度是 4px。

【问题讨论】：

请检查底部添加的图像是否具有白色或4像素透明的上边框???
根据我的经验，这通常是由于内嵌图片造成的。你可以试试 inline-block IE 技巧：css-tricks.com/snippets/css/cross-browser-inline-block
@DrJManish 这是我的第一个想法；图像被完全裁剪
@circusdei 刚刚尝试过，但这似乎没有奏效。无论如何，Outlook 在 Outlook 2003 之后都不支持“显示”属性（这对我来说很奇怪）。

标签： html css html-table html-email

【解决方案1】：

看起来不错；不错。此外，您不需要将所有 css 详细信息添加到每一行和每一列；只需添加：或或；然后在你的css工作表中（如果你没有它，那么只需创建）添加 td.Whatever-you-decide-to-name-it 或 tr.Whatever-you-decide-to-name-it 或表。无论您决定命名它。

希望对你有帮助！！！

【讨论】：

我同意它看起来并没有那么糟糕，但是我的设计师喜欢在 AI 中设计完整的流动布局，然后将它们切成图像；空白不是首选，因为其目的是将整个电子邮件流作为一个有凝聚力的设计。我在那里的占位符图像并不是最终美学的好例子。是的，我应该在发布之前清理 CSS - 其中大部分是我将所有东西都扔到墙上并查看是否有任何东西会粘住的副产品。将定义。生产前清理。
css 应该完全嵌入 html 电子邮件本身...因为许多电子邮件客户端阻止外部链接.....只是我的额外输入...
是的，您也可以使用此解决方案在 html 中嵌入 CSS；我的意思是在下面做这一切，因为这将有助于更好地组织它。

【解决方案2】：

由于您的img 不包含宽度（甚至auto），请将其初始化为块元素。既然您提到您的情况不支持该块，我为您的img 添加了display:table。我用这个答案添加了工作 sn-p。

img {
  display: table;
}

<!--2 Column Layout : BEGIN-->
<tr>
  <td align="center" valign="top" style="text-align: center; padding:0px; border-width:0px; margin:0px;">
    <table cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse:collapse; border:0px; border-spacing:0px;">
      <tr>
        <td class="stack-column-center" style="text-align: center; padding:0px; border-width:0px; margin:0px;">
          <table cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse; border:0px; border-spacing:0px;">
            <tr>
              <td style="text-align: center; padding:0px; border-width:0px; margin:0px;">
                <img src="http://i1024.photobucket.com/albums/y303/aadBresco/monkey_wrench_zpstk6rgf3j.png" width="300" alt="Monkey Wrench" border="0" class="fluid">
              </td>
            </tr>

          </table>
        </td>

        <td class="stack-column-center" style="text-align: center; padding:0px; border-width:0px; margin:0px;">
          <table cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse; border:0px; border-spacing:0px;">
            <tr>
              <td style="text-align: center; padding:0px; border-width:0px; margin:0px;">
                <img src="http://i1024.photobucket.com/albums/y303/aadBresco/auto_parts_zpsf1bs9tgv.png" width="300" alt="Auto Parts" border="0" class="fluid">
              </td>
            </tr>

          </table>
        </td>
      </tr>
    </table>
  </td>
</tr>
<!--2 Column Layout : END-->

<!--2nd Hero Image : BEGIN-->
<tr>
  <td class="full-width-image">
    <img src="http://i1024.photobucket.com/albums/y303/aadBresco/sliced-bread_zpsxt8z6pjt.png" width="600" alt="Sliced Bread" border="0" align="center" style="width: 100%; max-width: 600px; height: auto;">
  </td>
</tr>
<!--Hero Image : END-->

【讨论】：

正如我在原始帖子中提到的，大多数版本的 Outlook 都不支持 display:block，因此它不是此应用程序的可行解决方案。此外，当我尝试它时，它在浏览器中不起作用，所以它加倍没有意义。
所以你可以试试display:table 换成img 对你有帮助
在 Outlook 2003 之后，整个“显示”属性不再支持。

【解决方案3】：

由于display:block 不是解决方案，我尝试删除<!doctype html> 声明并解决了问题。通常我不认为这是可以接受的，但据我所知 - 并且经过测试 - 它对 HTML 电子邮件没有任何负面影响。

【讨论】：