css 图片下面有空白

在编写网页时，我们经常会将图片插入到网页中进行美化。然而，当我们在使用CSS控制图片大小时，会经常遇到图片下方出现一定空白的情况。

.img {
    display: block;
    width: 100px;
    height: 100px;
    background-repeat: no-repeat;
    background-position: center;
}

以上为CSS中常用的一段代码，用于控制图片大小。如果你使用以上代码，可能会发现图片下方会出现一定程度的空白，不仅不美观，还会影响其他布局元素。

这是为什么呢？原因是每张图片都有自己的行高，如果图片大小设置的不合理，可能会导致图片高度和行高不匹配，从而出现空白。

我们可以使用以下方法解决这个问题：

.img {
    display: block;
    width: 100px;
    height: auto;
    background-repeat: no-repeat;
    background-position: center;
}

我们只需要将高度改为自适应，这样可以让图片高度和行高完全匹配，不会出现空白。

除此之外，还有一些其它方法也可以解决图片下方空白的问题。其中一个方法就是将图片转为背景图再进行设置，这样可以更好的控制图片大小。

总之，解决图片下方空白的问题并不难，只需要注意图片大小的设置和行高的匹配，以及灵活掌握CSS布局技巧，就可以轻松美化你的网页界面。