Question

我正在创建一个包含以下html的电子邮件模板：

<tr>
    <td valign='top' align='center' style='font-size:0;white-space: nowrap;'>
        <img src='' align='top' border='0' style='display:block;width:620px;border:0px;white-space: nowrap;'/>
    </td>
</tr>
<tr>
    <td align='center' style='font-size:0;white-space: nowrap;'>
        <a href='#' style='font-size:0;display:block; border:0px;line-height:0;white-space: nowrap;' target='_blank'>
            <img align='top' border='0' src='#' style='display:block;border:0pxwidth:620px;white-space: nowrap;'/>
        </a>
    </td>
</tr>
</tr>

我只在 Android上的gmail应用上获得空白区域。知道我遗失了什么吗？

Answer 1

除了通过font-size: 0;对字体大小进行归零之外，通过line-height: 0; 将行高调零：

<table cellpadding="0" cellspacing="0" border="0" width="100%" style="">
    <tr>
        <td valign='top' align='center' style='font-size:0; line-height: 0;'>
            <img src='#' align='top' width='620' border='0' style='display:block;'/>
        </td>
    </tr>
    <tr>
        <td valign='top' align='center' style='font-size:0; line-height: 0;'>
            <a href='#' target='_blank'>
                <img src='#' align='top' width='620' border='0' style='display:block;'/>
            </a>
        </td>
    </tr>
</table>

注意：如果line-height: 0;导致图片完全崩溃，请尝试line-height: 1;。

我还在最后清理了额外的<tr>并删除了一堆不会影响间距的CSS规则。

Answer 2

Gmail的DOCTYPE可以在图片下创造额外的空间。以下是一些解决方法as mentioned in emailonacid website（这些也适用于Hotmail和Yahoo！Beta）：

1。）添加样式显示：阻止图像元素

<img src=“test.jpg” style=“display:block”>

2。）在图像元素中添加对齐absbottom

<img src=“test.jpg” align=“absbottom”>

3.）将对齐文本顶部添加到图像元素

<img src=“test.jpg” align=” texttop ”>

4.。）在包含TD

中添加10px或更低的行高

<td style=“line-height:10px”>

5.）在包含TD

中添加字体大小为6px或更低

<td style=“font-size:6px”>

Android设备上的Gmail应用中的电子邮件简报中的图像之间的空白区域

2 个答案: