今HTML,CSS,Bootstrapでページをデザインしています。
画像を正方形にトリミングし、5個ずつ2列で表示します。
以下のようにできているのですが、
それぞれの画像がくっつかず、余白をつけるようにしたいです。
現在、縦横比を保てるように実装できているのですが、余白の設定に詰まっています。
サポートいただけないでしょうか?
▼HTML
<div class="flex-container">
<ul>
<li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
<li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
<li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
<li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
<li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
<li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
<li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
<li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
<li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
<li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
</ul>
</div>
▼CSS
ul{
display: flex;
flex-wrap: wrap;
}
li{
position: relative;
width: 20%;
}
li:before{
content: "";
display: block;
padding-top: 100%;
}
img{
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
object-fit: cover;
}