[分享]css两张图片如何有间隔

CSS实现两张图片有间隔 在网页设计中，经常需要在页面上显示多张图片。有时候，将多张图片并排显示，让它们相邻紧密，会给用户较为压抑的视觉感受。而一些情境下，将图片之间增加一定空隙，可以让用户感受更加舒...

CSS实现两张图片有间隔
在网页设计中，经常需要在页面上显示多张图片。有时候，将多张图片并排显示，让它们相邻紧密，会给用户较为压抑的视觉感受。而一些情境下，将图片之间增加一定空隙，可以让用户感受更加舒适，也能提升整体的视觉效果。那么，如何通过CSS来实现两张图片之间的间隔呢？
第一种方法：设置margin间距
我们可以给图片元素设置margin属性来达到图片之间有一定间隔的效果：

html
<p class="image-wrap">
  <img src="image-1.jpg" alt="Image 1">
  <img src="image-2.jpg" alt="Image 2">
</p> 

css
.image-wrap img {
  margin-right: 10px;
} 

如上代码，我们将两张图片元素放在一个p标签中，并给图片元素设置了一个右侧10px的margin，这样就能实现图片之间有一定的间隔了。我们可以根据实际需求，调整所需的间隔大小。
第二种方法：使用Flexbox
使用Flexbox布局可以更加灵活地处理元素间的间隔。我们可以将图片元素放在一个Flex容器中，设置Flex项之间的间距。样例代码如下：

html
<div class="image-wrap-flex">
  <img src="image-1.jpg" alt="Image 1">
  <img src="image-2.jpg" alt="Image 2">
</div> 

css
.image-wrap-flex {
  display: flex;
  justify-content: space-between;
}
<br>
.image-wrap-flex img {
  width: 50%;
} 

如上代码，我们给父元素.image-wrap-flex设置了flex布局，并设置了其中flex项之间的间距为等分。因为容器设置了flex布局，子元素的高度就会相应调整。因为图片的尺寸不一定相同，为了让它们能够按列排列，我们还需要为图片元素设置一个宽度。这里我们将它们宽度设置成了50%。
可以看出，使用Flexbox布局可以更加灵活地实现图片之间的间隔。
以上是两种常见的实现方式，可以根据具体需求进行选择。给图片设定合理的间隔，可以使页面看起来更加舒适，提升用户体验。