css照片并排中间留白 |css多边形边框

.photo {
display: inline-block; /* 将照片变成行内块元素 */
width: 40%; /* 照片宽度占总宽度的40% */
margin: 2.5% 5%; /* 上下留白2.5%，左右留白5% */
}

首先，大家需要让照片变成行内块元素，这样它们就可以在同一行并排展示。使用display: inline-block;即可实现。

其次，大家需要设置照片宽度和外边距来实现留白效果。这里大家将照片宽度设置为总宽度的40%，并在上下、左右两个方向设置留白，具体如下：

width: 40%;
margin: 2.5% 5%;

上述代码中，margin: 2.5% 5%;表示上下留白2.5%，左右留白5%。

最后，只需要将照片按照这种方式排列即可：

<div class="photos">
<img src="photo1.jpg" class="photo">
<img src="photo2.jpg" class="photo">
</div>

上述代码中，<div class="photos">表示一个包含两张照片的div容器，class="photo"表示照片所使用的CSS类。

通过这种方式，大家可以很容易地在照片并排展示的同时实现中间的留白效果，让网页更加美观。