css照片并排中间间隙

在网页制作中，照片并排显示是非常常见的需求，而在照片之间加入间隔也是比较常见的实现方法之一。下面介绍如何通过CSS实现照片并排中间间隙的效果。

<style>
  
  .photo {
  
   
   display: inline-block;
  
   
   margin: 10px;
  
}
</style> 

首先，我们定义一个.photo类用来表示图片。我们设置它的display属性为inline-block，使得图片能够按照我们的需求并排显示。同时，我们为它设置了一个margin属性，这个属性用来表示图片之间的间隙大小，这里我们设置为10px。

<div>
  
  <img src="photo1.jpg" alt="Photo 1" class="photo">
  
  <img src="photo2.jpg" alt="Photo 2" class="photo">
  
  <img src="photo3.jpg" alt="Photo 3" class="photo">
</div> 

接下来，我们使用一个div容器将三个图片包裹起来，方便我们进行样式控制。在每个图片标签中添加我们刚刚定义的.photo类名，这样图片就会按照我们的样式进行显示。

上述代码就是实现照片并排中间间隙的最基本代码，可以根据实际需求进行调整，例如更改间隙大小等等。