为什么不在电子邮件中的 <img> 上使用 "vertical-align: top;" 而不是 "display: block;"？

Question

这个模式： <img src="path/to/image.png" width="420" height="130" style="display: block; border: none;"> 已经变得普遍，现在它是一种最佳实践。我看到这是每篇文章和每个项目。

如果我理解正确，display: block; 用于删除图像下方的几个空 space 像素，这是因为 <img> 默认与基线对齐。

但为什么不使用 vertical-align: top; 呢？这在代码中更直接，并且在响应需要 display 属性时不会引起混淆：

Answer 1

你说得对，vertical-align:top 是 <img> 标签中 display:block 的替代品。他们取得了同样的结果。

我通过 Litmus 测试了桌面应用程序：Apple Mail 13、IBM Notes 10、Outlook 2010、Outlook 2019、Windows 10 Mail、Thunderbird 60；移动客户端：android 6 本机，Gmail android，Gmail IMAP，三星，Outlook Android，Gmail iOS，Outlook iOS，iPhone 13;和网络邮件：Comcast，freenet.de，Gmail 网络邮件，GMX.de，Mail.ru，Outlook。com/Office 365，T-Oline.de，Web.de，雅虎！邮件

测试代码：

<!DOCTYPE HTML>
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"  xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  <head> <!-- START HEAD v4-->
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <!--[if !mso]><!-->
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <!--<![endif]-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title></title>
</head>
 <!-- END HEAD -->
    <body style="margin:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;min-width:100%;background-color:#ffffff;">
    <!-- START OUTER WRAPPER -->
    <center id="wrapper" class="wrapper" style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;">
        <div style="max-width:600px;">
            <!--[if (gte mso 9)|(IE)]>
            <table width="600" align="center" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;" >
            <tr>
            <td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-collapse:collapse;" >
            <![endif]-->
            <table class="outer" align="center" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;margin:0 auto;width:100%;max-width:600px;">
            <!-- END OUTER WRAPPER -->
                <tr>
                    <td bgcolor="#ff0000" style="padding:0;">
                        <img src="https://via.placeholder.com/120x130?text=nothing" width="120" style="border: none;">
                    </td>
                </tr>
                <tr>
                    <td bgcolor="#00ff00" style="padding:0;">
                        <img src="https://via.placeholder.com/120x130?text=displayBlock" width="120" style="display:block;border: none;">
                    </td>
                </tr>
                <tr>
                    <td bgcolor="#0000ff" style="padding:0;">
                        <img src="https://via.placeholder.com/120x130?text=verticalAlignTop" width="120" style="border: none;vertical-align: top">
                    </td>
                </tr>
            <!-- START OUTER WRAPPER -->
            </table>
            <!--[if (gte mso 9)|(IE)]>
            </td>
            </tr>
            </table>
            <![endif]-->
        </div>
    </center>
    <!-- END OUTER WRAPPER -->
</body>
</html>

预期结果：

所有 vertical-align:top 按 display:block 显示。在 Samsung Mail (Android) 上，每个样本（即所有变体）的轮廓都非常细，我无法去除。在我看来，这似乎是一个不同的问题，因为 vertical-align:top 与 display:block 具有相同的微小轮廓（不是边框或轮廓）（并且什么都没有）。仅与 Samsung Mail 相关的某种呈现问题。

结论：vertical-align:top 是 <img> 标签中 display:block 的替代品。

为什么不在电子邮件中的 <img> 上使用 "vertical-align: top;" 而不是 "display: block;"？

Why not to use "vertical-align: top;" instead of "display: block;" on <img> in emails?

email

html-email