HTML电子邮件 - 表格行之间的空白区域 [英] HTML email - white space between table rows

问题描述

我正在构建一组电子邮件明信片，并且遇到某些版本的Outlook和Gmail在某些（但不是全部）表行之间创建不需要的空间的问题。

>我对编写HTML电子邮件相当陌生，需要帮助解决问题 - 任何人都可以告诉我在代码中需要更改什么来解决此问题？

页面： http://www.kristi.net/holidaycards/card_test.html

以下是屏幕截图，显示Outlook中的问题： http://i43.tinypic.com/34ezrc3.gif

这些客户受到影响：
$ b $ Outlook 2010

b $ b Outlook 2010

Outlook 2013

Gmail（Android）

Gmail（资源管理器）

Gmail（Chrome）

此外，为了让您知道，用户将在浏览器中打开HTML，然后将内容复制粘贴到他们的电子邮件客户端（Outlook）中，然后再自定义文本并发送消息。

在图片上需要 style =display：block;。试试像这样：

 < img alt =src =width =height =style = margin：0; border：0; padding：0; display：block;> 
  

您应该注意到，如果有人将您的电子邮件转发出Outlook，这些差距是不可避免的。出于这个原因，垂直分割图像总是更好。

这应该让你开始：

 < table width = 600border =0cellpadding =0cellspacing =0> 
< tr> 
< td width =50> 
< img alt =src =width =50height =300style =margin：0; border：0; padding：0; display：block;> 
< / td> 
< td width =500valign =top> 
< table width =100％border =0cellpadding =0cellspacing =0> 
< tr> 
< td> 
< img alt =src =width =500height =50style =margin：0; border：0; padding：0; display：block;> 
< / td> 
< / tr> 
< tr> 
< td height =200valign =topstyle =font-family：Helvetica，Arial，sans-serif; font-size：14px; color：＃000000; padding：20px;> 
这里的内容... 
< / td> 
< / tr> 
< tr> 
< td> 
< img alt =src =width =500height =50style =margin：0; border：0; padding：0; display：block;> 
< / td> 
< / tr> 
< / table> 
< / td> 
< td width =50> 
< img alt =src =width =50height =300style =margin：0; border：0; padding：0; display：block;> 
< / td> 
< / tr> 
< / table> 
  

I am building a set of email postcards and have run into trouble with some versions of Outlook and Gmail creating unwanted spaces between certain (but not all) table rows.

I am fairly new to coding HTML email and need help troubleshooting - can anyone tell me what needs to be changed in my code to resolve this issue?

Here is my test page: http://www.kristi.net/holidaycards/card_test.html

And here is a screen cap showing the problem in Outlook: http://i43.tinypic.com/34ezrc3.gif

These clients are affected:

Outlook 2007
Outlook 2010
Outlook 2013
Gmail (Android)
Gmail (Explorer)
Gmail (Chrome)

Also, just to let you know, users will be opening the HTML in their browser, and then copy-pasting the content into their email client (Outlook), before customizing the text and sending the message.

解决方案

You need style="display:block;" on your images. Try something like this:

<img alt="" src="" width="" height="" style="margin: 0; border: 0; padding: 0; display: block;">

You should note that these gaps are unavoidable if someone forwards your email out of Outlook. For this reason, it is always better to split an image vertically.

This should get you started:

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="50">
      <img alt="" src="" width="50" height="300" style="margin: 0; border: 0; padding: 0; display: block;">
    </td>
    <td width="500" valign="top">
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td>
            <img alt="" src="" width="500" height="50" style="margin: 0; border: 0; padding: 0; display: block;">
          </td>
        </tr>
        <tr>
          <td height="200" valign="top" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000; padding:20px;">
            Content here...
          </td>
        </tr>
        <tr>
          <td>
            <img alt="" src="" width="500" height="50" style="margin: 0; border: 0; padding: 0; display: block;">
          </td>
        </tr>
      </table>
    </td>
    <td width="50">
      <img alt="" src="" width="50" height="300" style="margin: 0; border: 0; padding: 0; display: block;">
    </td>
  </tr>
</table>

这篇关于HTML电子邮件 - 表格行之间的空白区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！