为什么 DIV 中的 HTML5 图像有时会有神秘的 3px 下边距？

了解 HTML5 图像中神秘的 3px 边距

一些用户遇到了一种意想不到的现象，DIV 元素中的图像呈现出奇特的 3px 底部边距尽管没有任何明确的 CSS 边距。为了更深入地研究这种异常现象，让我们探索一下提供的代码片段：

<div class="placeholder">
    <img src="/static/imghwm/default1.png" data-src="/haha.jpg" class="lazy" alt="">
</div>

当将 display: table 样式分配给 .placeholder 时，添加的高度（53px 而不是 50px）表明图像的行为如下文本字符串中的一个字符，在下面留一个空格作为悬挂字母，如“y”或“g”。

要解决此问题，CSS 属性可以使用vertical-align来指示不需要这样的空间。如提供的代码块中所示，设置 Vertical-align: middle 垂直对齐图像，而不留下任何额外的空白。

这是实施解决方案的修订代码：

img {
    vertical-align: middle;
}

通过应用通过此调整，图像将在 DIV 元素内正确对齐，消除令人费解的 3px 边距。用户可以参考附加的 jsFiddle 链接来获取工作示例：

http://jsfiddle.net/fRpK6/1/

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