HTML 电子邮件签名 - 图像并排，中间没有空格答案

【问题标题】：HTML Email Signature - Images side by side with NO SPACE betweenHTML 电子邮件签名 - 图像并排，中间没有空格
【发布时间】：2020-05-19 10:19:49
【问题描述】：

我正在尝试创建一个 HTML 电子邮件签名，我将 2 个图像并排放置。

这是我正在使用的 html 代码： https://codepen.io/klodoma/pen/mdeQYrB

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style media="screen" type="text/css">
    body{
        background-color: white;
        margin: 0;        
    }
    img { display: block;}
    .row {
        white-space: nowrap;
        display: flex;
    }
</style>
</head>
<body>
<div class="row" style="white-space:nowrap;">
    <img src="https://i.postimg.cc/DyCPXxdQ/hair-left.png" alt="Left Image"/>
    <img src="https://i.postimg.cc/Mpvbb1dC/hair-right.png" alt="Right Image"/>
</div>
<table border="0" cellspacing="0" cellpadding="0" style="padding:0; margin:0;">
    <tr>
        <td><img src="https://i.postimg.cc/DyCPXxdQ/hair-left.png" alt="Left Image"/></td>
        <td><img src="https://i.postimg.cc/Mpvbb1dC/hair-right.png" alt="Right Image"/></td>
    </tr>
</table>
</body>
</html>

我试过了：

创建一个 DIV
创建表

在 Html 中看起来都很好，但是当我将此代码粘贴到电子邮件客户端（例如 Outlook）中时，出现了一些问题。

如果电子邮件页面的宽度不够，则 div 会移动图像（即使禁用了自动换行）。在表格版本中有一个我无法摆脱的垂直空间。

有解决这个问题的想法吗？我不在乎哪种解决方案会起作用，div 或表格。

【问题讨论】：

标签： html css outlook

【解决方案1】：

这里有几个方面：

Outlook 只读取高度和宽度数值（如果它们也在样式标签之外，我认为）。在这里，您可以在下面看到我为我的方法添加了冗余。

<img src="https://imageurl....." alt="alt-text" height="48" width="48" style="display: block; width: 48px; height: 48px;" />

您可能还会发现将初始表格的宽度设置在您已应用边距和填充重置的同一点处会很有帮助。

要删除任何不需要的垂直空间，您还应该在我相信的<td> 元素中将填充重置为 0。

【讨论】：