为什么不在电子邮件中使用&Quot；Vertical-Align：top；而不是"；Display：Block；on<；img&>；？ [英] Why not to use "vertical-align: top;" instead of "display: block;" on <img> in emails?
本文介绍了为什么不在电子邮件中使用&Quot；Vertical-Align：top；而不是"；Display：Block；on<；img&>；？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
此模式：
<img src="path/to/image.png" width="420" height="130" style="display: block; border: none;">
已经变得很普遍，现在它是一种最佳实践。我看到这是每一篇文章和每个项目。
如果我理解正确的话，display: block;用于删除图像下由于默认情况下<img>与基线对齐而导致的少量空白像素。
vertical-align: top;呢？这在代码中更加简单明了，当响应所需的display属性：时不会引起混淆
推荐答案
您说得对，vertical-align:top是<img>标记中display:block的替代。他们取得了相同的结果。
测试代码：
<!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的替代。
这篇关于为什么不在电子邮件中使用&Quot；Vertical-Align：top；而不是"；Display：Block；on<；img&>；？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
