padding-right: 20px;到 Outlook 电子邮件中的图像答案

【问题标题】：padding-right: 20px; to an image in outlook emailpadding-right: 20px;到 Outlook 电子邮件中的图像
【发布时间】：2015-07-16 19:46:27
【问题描述】：

这适用于 Gmail 和 Mobile Exchange，但不适用于 Outlook 2010（尽管填充应该在 2010 年有效？）。

<img src="http://coolguys.org/signature/georgeWcool.jpg" alt="Cool logo" style="display:block;padding-right:20px;">

无论有没有显示块，上面的内容在 Outlook 中都会被完全忽略。并且只是在它旁边的文本中产生结果，直接混入图像的一侧。同样，在 Gmail 和 Mobile Exchange 中解决得很好。

我在这张图片的右边有文字，所以使用：&nbsp; 是一个非常混乱的选项。还有其他类似的想法吗？（类似 = 适用于大多数地方）

更新@Mike“更多代码”如下：

<tr style="height: 50px; font-size:12px;">
        <td><img src="http://coolguys.org/signature/georgeWcool.jpg" alt="Cool logo" style="display:block;padding-right:20px;"></td>
        <td style="color: #002953; max-height: 20px;">
            <span style="font-size:12px !important; font-weight: bolder;">
            This one time at band camp Lorem Ipsum</span><br>
            <span style="font-weight: bolder;font-size:12px !important;">Jeepers HTML emails suck lorem ipsum<br>
            </span>
            <br>
            <!-- etc -->

【问题讨论】：

你能分享更多的代码吗？我想知道 HTML 的其余部分是什么样的。另外，我确定您已经尝试过，但如果填充对我不起作用，我总是尝试调整 HTML 电子邮件中的边距
是的，边距应该是最差的！！！！！！！！！！！！
stackoverflow.com/questions/8310609/…
谢谢@carambo 但是我如何在 Outlook 中实现这一点呢？同时也在gmail和移动交换中维护

标签： html outlook html-email

【解决方案1】：

在 Outlook 中的 td 标签上使用填充。 Img 或 div 标签不支持填充。查看http://www.campaignmonitor/css 以了解有关跨电子邮件客户端的 CSS 兼容性的更多信息。

【讨论】：

建议的编辑队列已满 - 正确的 URL 是 campaignmonitor.com/css

【解决方案2】：

无论人们告诉您什么，Outlook 都支持填充。这取决于你在哪里定义它。我建议不要在图像上添加填充。请记住 Padding 在元素内部，Margin 在元素外部，因此在这种情况下，您最好将其添加到图像的包装表格单元格中。

您还有另一个选择，即为包装表格单元格设置宽度。这个宽度应该等于图像的宽度 + 20px 以考虑您的填充。那么你就不需要填充了。显然，这只有在你有一个明确定义的工作宽度时才有效，而我在你的 HTML 中没有看到这个宽度。如果您的元素始终是一个宽度，请将宽度添加到 Image 标签。这样，带有文本的第二个表格单元格将占用该表格中剩余的可用空间，并且始终位于图像右侧 20 像素处

【讨论】：

我已经完成了您的选项 B。）但是在移动设备上它会压缩表格单元格，导致这对于“Outlook、Mobile Exchange 和 Gmail”支持来说是一个不稳定的解决方案。不过我会尝试你的第一个选项。
如何压缩它？向图像的包装单元格添加宽度的所有操作都是将该单元格限制为定义的宽度。这里应该不会有太大的意外。我们可以通过什么方式查看您的整个 html 代码？
将其添加到包装表格单元格中；第一个建议奏效
太棒了，很高兴我能帮上忙！
谢谢，林赛·布罗汉。