尽管没有显式 CSS，为什么我的 HTML5 图像底部边距为 3 像素？

HTML 5 图像异常：无法解释的底部边距问题

使用 HTML 5 时，用户可能会遇到一个令人困惑的问题，即图像包含在 DIV 元素中表现出令人费解的 3px 底部边距。尽管 CSS 中没有明确的边距定义，但这种异常现象仍然存在。例如，考虑以下 HTML 结构：

<div class="placeholder">
    <img alt="" src="/haha.jpg" />
</div>

.placeholder DIV 拥有 display: table 样式，图像的尺寸保持在 50x50px。然而，.placeholder DIV 神秘地垂直扩展至 53px。这种意外的行为让许多寻求解决方案的开发者感到困惑。

解决方案：垂直对齐

这种异常的根本原因在于将图像作为文本字符处理，导致下面有一个不需要的空间，类似于“y”或“g”等字母的下行部分所占据的空间。为了解决这个问题，CSS 垂直对齐属性确保不会分配这样的空间。实际上，vertical-align 的任何值都足够，其中 middle 是一种流行的选择。

img {
    vertical-align: middle;
}

实施此解决方案有效地消除了 3px 下边距并解决了图像显示问题。如更新的 jsFiddle 所示，图像及其周围的 DIV 现在显示其预期尺寸，而图像下方没有特殊的空白空间。

以上是尽管没有显式 CSS，为什么我的 HTML5 图像底部边距为 3 像素？的详细内容。更多信息请关注PHP中文网其他相关文章！