css 图片上下有间隙

CSS是网页设计中的重要组成部分，它可以控制页面元素的样式、布局、动画等。但有时候我们在使用CSS处理图片时，可能会遇到一些问题，比如在图片上下出现了间隙的情况。

造成这种情况的原因有很多，比如图片的高度和宽度没有设置好、图片周围有边框或者内边距、图片是行内元素等等。

    <img src="picture.png" style="border: 1px solid black;">

在上面这个例子中，我们为图片设置了一个1像素的黑色边框。因为默认情况下，图片是行内元素，所以它在页面上会受到行高的影响。如果行高比图片高度大，就会在图片上下出现一些间隙。

解决这个问题的方法也很简单，我们可以将图片的display属性设置为块级元素，这样就可以避免受到行高的影响。

    <img src="picture.png" style="border: 1px solid black; display: block;">

除了将display属性设为块级元素，我们还可以设置图片的垂直对齐方式为顶部或底部，这样也可以避免图片出现空隙。

    <img src="picture.png" style="border: 1px solid black; vertical-align: top;">

在以上两个例子中，我们通过style属性为图片设置样式。但更好的做法是在CSS文件中写入相应的样式，这样可以将页面的外观和布局分离开来，方便维护。

    img {
        display: block;
        border: 1px solid black;
        vertical-align: top;
    }

总之，当在CSS处理图片时出现上下空隙的情况，我们可以通过设置图片的display属性为块级元素或者设置其垂直对齐方式为顶部或底部来解决问题。