css上下两个图片紧贴

在网页设计中，我们经常需要在同一行中显示多个图片，而且这些图片要紧贴在一起，不能有间隙。下面介绍一种使用CSS实现上下两个图片紧贴的方法。

 <div class="container">
        <img src="image1.png" class="img-top">
        <img src="image2.png" class="img-bottom">
    </div> 

首先，我们需要在HTML中使用一个div容器，把这两个图片包裹起来。然后，对这个容器应用CSS样式。具体如下：

 .container{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
    .img-top, .img-bottom{
        flex-basis: 100%;
    }
    .img-bottom{
        margin-top: -10px;
    } 

使用CSS的flexbox布局，可以实现上下两个图片自动排列在同一行中，并且紧贴在一起。同时，我们通过把图片的flex-basis设置为100%，来让图片占满整个行。最后通过给下面的图片一个负的margin-top，来让它和上面的图片贴合。

通过这个方法，我们可以轻松实现上下两个图片紧贴的效果。不仅如此，这个方法还可以适用于更多的图片排列情况，让我们少花费不必要的时间去手动调整图片的间距。