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

问题描述 投票：0回答：3

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

  • border-collapse：collapse（我从一开始就默认放置）
  • 设定保证金：0（几乎无处不在）
  • cellspacing和cellpadding为零（我在构建表时默认已经这样做了）。
  • 显示：阻止和显示：内联块（Outlook不支持，但无论如何都没有解决我的问题）。

这是我的代码片段（忽略任何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。

The small gap at the bottom of the row is visible if you look closely. It is 4px high.

html css html-table html-email
3个回答
1
投票

看起来不错;不错。此外，您不需要将所有css详细信息添加到每个行和列;只需添加：或或;然后在你的css表中（如果你没有它，那么只需创建）添加td.Whatever-you-to-name-it-it或tr.Whatever-you-decision-to-name-it或table。任何你决定到名称 - 它。

希望这可以帮助！！！

0
投票

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

0
投票

由于你的img不包含宽度（甚至auto），所以将它初始化为块元素。因为你已经提到在你的情况下不支持块我为你的display:table添加了img。我添加了这个答案的工作片段。

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-->
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.