如何消除img标签之间的间隙? - 优化网页布局的技巧

4 min read

您可以尝试在CSS中将img元素的display属性设置为"block",然后将其包含在一个容器元素中,并为该容器元素设置"font-size: 0;"和"letter-spacing: -1em;"的样式。这样可以消除图像之间的间隔隙。以下是示例代码:

<style>
    .image-container {
        font-size: 0;
        letter-spacing: -1em;
    }
    
    .image-container img {
        display: block;
    }
</style>

<div class="image-container">
    <img src="image1.jpg" alt="">
    <img src="image2.jpg" alt="">
    <img src="image3.jpg" alt="">
</div>

这将消除图像之间的间隔隙,使它们看起来像一个连续的图像。