Question

我的HTML电子邮件在header.png和body.png图片之间有额外的空白区域（实际上是他们的表格行）。我不能为我的生活弄清楚为什么会这样。它只发生在适用于Android的Gmail上，而不适用于适用于Iphone的Gmail。这是代码：

<body topmargin="0">
<table align="center" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse; border-spacing:0; border: none; border: 1px solid #b76f49">
    <tr>
        <td width="600" style="display:block !important;">
            <table cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse; border-spacing:0;">
                <tr>
                    <td width="600" style="line-height:0;">
                        <table cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse; border-spacing:0;line-height:0;font-size:1px;">
                            <tr>
                                <td width="17" style="line-height:0;min-width:17px;">
                                    <img src="headerleft.png" width="17" style="display:block !important; line-height:0;font-size:1px;" align="absbottom">
                                </td>
                                <td width="567" style="line-height:0;min-width:567px;">
                                    <img alt="" border="0" width="567" src="header.png" style="display:block !important; line-height:0;font-size:1px;" align="absbottom">
                                </td>
                                <td width="16" style="line-height:0;min-width:16px;">
                                    <img src="headerright.png" width="16" style="display:block !important; line-height:0;font-size:1px;" align="absbottom">
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td width="600" style="display:block !important;">
                        <table cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse; border-spacing:0;">
                            <tr>
                                <td width="17" style="border-right:3px solid #b76f49; min-width:17px; font-size:1px;">
                                    <img src="bodyleft.png" width="17" border="0" style="display:block !important; line-height:0; font-size:1px;">
                                </td>
                                <td width="561">
                                    <table cellpadding="0" cellspacing="0" width="561" style="border-collapse: collapse; border-spacing:0;">
                                        <tr>
                                            <td width="20" style="font-size:1px;">
                                                &nbsp;
                                            </td>
                                            <td width="357" valign="top" style="font-family: Arial; font-size: 14px; font-color: #000;">
                                                <p style="font-family:Arial; font-size: 16px; font-weight: bold; color:#004685;">HEader</p>
                                                Hello,<br><br>

                                                <ul>
                                                    <li></li>
                                                    <li></li>
                                                    <li></li>
                                                    <li></li>
                                                </ul>
                                                &nbsp;
                                            </td>
                                            <td width="184" style="min-width:184px;">
                                                <img src="bodyrightimage.png" width="170" height="400" border="0" align="right" style="font-size: 1px; line-height:0px; display:block!important;">
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                                <td width="30" style="border-left:3px solid #b76f49;min-width:30px;">
                                    <img src="bodyright.png" height="400" width="16" border="0" style="display:block !important; line-height:0; font-size: 1px;">
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>

Answer 1

HTML将换行符计为空格，因此如果您使用表格单元格（ick）进行布局，则此代码为：

<tr>
   <td>
      <img ... />
                 ^---line break here
   </td>
^^^---indentation whitespace here
   <td>
      <img ... />
   </d>
</tr>

将呈现为

[img] [img]
     ^----linebreak+indentation as whitespace

简单的解决方案：不要将</td>放在单独的一行：

<tr>
   <td><img ../></td>
   <td><img ../></td>
</tr>

Android GMAIL App上的HTML电子邮件中的间距

1 个答案: