css两个图片有空隙

在进行CSS布局时，有时会遇到两张图片之间出现空隙的问题。这个问题可能会让页面看起来不够美观，但是有一些简单的方法可以解决这个问题。

img {
   display: block;
   max-width: 100%;
   height: auto;
   margin: 0 auto;
}

css两个图片有空隙

上述代码是一个常见的CSS样式，它可以让图片在浏览器窗口中居中显示。但是，在某些情况下，如果在一个容器中放置了两张图片，可能会发现它们之间会出现空隙。这是因为图片默认是基于baseline对齐的，在baseline之上会存在一些空白像素。

解决这个问题的方法之一是使用CSS的vertical-align属性。将vertical-align设置为top或bottom可以使图片对齐到容器的顶部或底部，进而消除其中的空隙。如下所示：

img {
   vertical-align: top;
}

另一种方法是在容器内使用font-size:0。通过这种方式，容器中的所有元素都被设置为0大小，这样图片之间的空隙也就消除了。

.container {
   font-size: 0;
}
.container img {
   display: inline-block;
   width: 50%;
   max-width: 100%;
   height: auto;
}

上述代码将容器的字体大小设为0，并将内部的图片属性设置为最大宽度为50%，并且可以自适应容器的大小。这样一来，在容器中放置两张图片时，它们之间的空隙就会被消除。

这两种方法都可以解决图片之间可能出现的空隙问题。开发中，可以根据具体的情况选择合适的方法来解决这个问题。这样可以使得页面的布局更加紧凑、美观。