为什么我的 HTML5 图像有神秘的 3px 底部边距？

HTML5 Enigma：显示意外利润的图像

考虑将网站转换为 HTML5 时遇到的特殊问题。出乎意料的是，DIV 元素中包含的每个图像都显示出令人费解的 3px 底部边距，尽管 CSS 中没有这样的边距。尽管进行了广泛的检查，但这种异常的原因仍然难以捉摸。

当图像被指定为 50x50 像素的尺寸，而包含的 DIV 元素 (

) 配置为显示时，此问题的表现变得明显： 桌子。有趣的是，.placeholder 的高度尺寸可疑地增加到了 53 像素。

解决谜题

解决这一令人困惑的行为在于理解图像的固有特征HTML。默认情况下，图像的行为类似于文本字符，从而在图像下方为“y”或“g”等字母的假设“尾部”保留空间。为了纠正这个问题，可以使用CSS属性vertical-align来指示没有这种额外的垂直间距。

实现

为了消除不需要的底部边距，只需合并以下CSS规则：

img {
    vertical-align: middle;
}

通过指定vertical-align的值，图像在其父级中的垂直对齐方式元素被调整，有效地中和了保留的空间。

视觉验证

这个解决方案在更新的 jsFiddle 中得到了优雅的演示：[提供链接]。

以上是为什么我的 HTML5 图像有神秘的 3px 底部边距？的详细内容。更多信息请关注PHP中文网其他相关文章！