Question

在Outlook桌面应用程序（2010年和2013年）中，顶部和底部的图像存在额外差距：

如果内容被标记，可能更容易识别问题：

它看起来像一些边距和填充物，但这不起作用。我也尝试了不同的黑客/解决方案（例如，在表格单元格上设置行高，删除表格单元格中的空格，删除周围的div，在图像上设置vspace和hspace，为图像设置ignore，...）效果。 HTML看起来像：

display: block

渲染应该像在其他客户端或浏览器中一样：

Answer 1

您是否已在<head>和<table>的电子邮件的<td>中添加了任何CSS重置？以下是我使用的重置代码重点是重置<table>中的填充和边框（不必内联）：

<head>
    <style>
        /* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
        table {
            border-spacing: 0 !important;
            border-collapse: collapse !important;
            table-layout: fixed !important;
            margin: 0 auto !important;
        }
        table table table {
            table-layout: auto; 
        }

        /* What it does: Stops Outlook from adding extra spacing to tables. */
        table,
        td {
            mso-table-lspace: 0pt !important;
            mso-table-rspace: 0pt !important;
        }
    </style>
</head>

这是full CSS reset I use for emails。

修改

关于图像，为每个图像添加display: block;内联，以消除图像下方的任何额外空间。

<img style="margin: 0; display: block;" align="left" src="/path/to/image.jpg" width="311" height="234" alt="">

Answer 2

我遇到了同样的问题，并发现了一个解决方案。

从文本的父<td>中删除填充，在此<td>中嵌套另一个表，然后将填充添加回子<td>。

所以，为了简化你的例子：

<table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tbody>
        <tr>
            <td style="padding: 0">
                <div>
                    <img align="left" src="/path/to/image.jpg" width="311" height="234" alt="" style="margin: 0;">
                </div>
            </td>
            <td width="10">
                &nbsp;
            </td>
            <td style="padding: 10px 10px 10px 10px; background-color: #ececed;">
                <h1>PhD-Program erstmals ausgezeichnet</h1>
            </td>
        </tr>
    </tbody>
</table>

会变成：

<table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tbody>
        <tr>
            <td style="padding: 0">
                <div>
                    <img align="left" src="/path/to/image.jpg" width="311" height="234" alt="" style="margin: 0;">
                </div>
            </td>
            <td width="10">
                &nbsp;
            </td>
            <td style="background-color: #ececed;">
                <table width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tbody>
                        <tr>
                            <td style="padding: 10px 10px 10px 10px;">
                                <h1>PhD-Program erstmals ausgezeichnet</h1>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

删除Outlook中的顶部和底部图像间距

2 个答案: