CSSにおいて正方形に余白がある状態にしたい

Question

今HTML,CSS,Bootstrapでページをデザインしています。

画像を正方形にトリミングし、５個ずつ２列で表示します。
以下のようにできているのですが、
それぞれの画像がくっつかず、余白をつけるようにしたいです。

現在、縦横比を保てるように実装できているのですが、余白の設定に詰まっています。
サポートいただけないでしょうか？

    <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;
}

Comments

[hoshi-takanori]

余白をどうしたいかによりますが、li の width: 20%; を 18% とかに減らして、ul に justify-content: space-between; または space-around を指定するとか？
(個人的には、リスト項目じゃないものに ul や li タグを使うのはどうかと思いますが…。)

[solMackartony]

そうですね。
色々試している中で混乱してしまったのか、widthの設定を減らして、marginを設定することができました。自己解決投稿いたします。

Answer 1

以下のやり方でできました。

 <section class="testimonials"> 
            <div class="flex-container">
                <ul>
                    <li><img src="img/blog/1.jpg" alt=""></li>
                    <li><img src="img/blog/1.jpg" alt=""></li>
                    <li><img src="img/blog/1.jpg" alt=""></li>
                    <li><img src="img/blog/1.jpg" alt=""></li>
                    <li><img src="img/blog/1.jpg" alt=""></li>
                    <li><img src="img/blog/1.jpg" alt=""></li>
                    <li><img src="img/blog/1.jpg" alt=""></li>
                    <li><img src="img/blog/1.jpg" alt=""></li>
                    <li><img src="img/blog/1.jpg" alt=""></li>
                    <li><img src="img/blog/1.jpg" alt=""></li>
                </ul>
            </div>
        </section>

.testimonials {
  padding: 2% 0;
  background: #000;
}
.testimonials ul{
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0;
}
.testimonials li{
  position: relative;
  width: 18%;
  margin: 1%;
}
.testimonials li:before{
  content: "";
  display: block;
  padding-top: 100%;
}
.testimonials img{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  object-fit: cover;
}