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

时间:2018-08-31 17:46:35

标签: html css html-table html-email

首先,我说我已经很长时间没有建立HTML电子邮件了;我对CSS的宠爱已经太久了,所以回到使用表构建东西的过程令人沮丧。我很难让两排彼此齐平。无论我尝试过什么,都无法消除。在S.O.上搜寻其他职位只产生我已经尝试过但没有奏效的解决方案。大约40%的目标受众正在Outlook上查看电子邮件,这意味着CSS支持非常有限。我尝试过的事情:

  • border-collapse:collapse(我已经从一开始就默认将其放置到位)
  • 设置边距:0(几乎到处都是)
  • 将cellspacing和cellpadding设置为零(在构建表时,默认情况下我已经这样做了。)
  • display:block和display:inline-block(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-->

如果仔细观察,将看到行底部的小间隙。高度为4像素。

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

3 个答案:

答案 0 :(得分:1)

我看起来不错;不错。另外,您无需将所有CSS详细信息添加到每一行和每一列;只需添加:或或;然后在css工作表中(如果没有,只需在其上创建)添加td。无论您决定要命名它还是tr。无论您决定要命名它还是表。无论您决定使用它的名字。

希望这会有所帮助!

答案 1 :(得分: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-->

答案 2 :(得分:0)

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