img 标签与外层容器底部存在距离

Posted 2021-03-04 xiaoyucoding

首先是以下代码：

<div>
    <img src="../images/logo.png" alt="">
</div>

在浏览器中预览会发现，图片并没有填充满外层的<div>，底部存在一定的距离。

具体原因在网上查找后有这么一段话：

图片文字等inline元素默认是和父级元素的baseline对齐的，而baseline又和父级底边有一定距离（这个距离和 font-size，font-family 相关，不一定是 5px），所以设置 vertical-align:top/bottom/text-top/text-bottom 都可以避免这种情况出现。

解决的方法有以下几种：

设置 img 为块级元素。

img {
    display: block;
}

设置 img 的 vertical-align。

img {
    vertical-align: middle;
}

设置外层 div 容器的字体大小为 0。

div {
    font-size: 0;
}