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

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

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

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

HTML
1
2    <div class="flex-container">
3                    <ul>
4                        <li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
5                        <li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
6                        <li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
7                        <li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
8                        <li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
9                        <li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
10                        <li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
11                        <li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
12                        <li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
13                        <li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
14                    </ul>
15                </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;
}

hoshi-takanori

2021/01/01 13:12

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

solMackartony

2021/01/01 16:29

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

行動規範の内容に同意します

回答1件

自己解決

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

html
1 <section class="testimonials"> 
2            <div class="flex-container">
3                <ul>
4                    <li><img src="img/blog/1.jpg" alt=""></li>
5                    <li><img src="img/blog/1.jpg" alt=""></li>
6                    <li><img src="img/blog/1.jpg" alt=""></li>
7                    <li><img src="img/blog/1.jpg" alt=""></li>
8                    <li><img src="img/blog/1.jpg" alt=""></li>
9                    <li><img src="img/blog/1.jpg" alt=""></li>
10                    <li><img src="img/blog/1.jpg" alt=""></li>
11                    <li><img src="img/blog/1.jpg" alt=""></li>
12                    <li><img src="img/blog/1.jpg" alt=""></li>
13                    <li><img src="img/blog/1.jpg" alt=""></li>
14                </ul>
15            </div>
16        </section>

css
1.testimonials {
2  padding: 2% 0;
3  background: #000;
4}
5.testimonials ul{
6  display: flex;
7  flex-wrap: wrap;
8  margin-bottom: 0;
9}
10.testimonials li{
11  position: relative;
12  width: 18%;
13  margin: 1%;
14}
15.testimonials li:before{
16  content: "";
17  display: block;
18  padding-top: 100%;
19}
20.testimonials img{
21  position: absolute;
22  width: 100%;
23  height: 100%;
24  top: 0;
25  right: 0;
26  bottom: 0;
27  left: 0;
28  margin: auto;
29  object-fit: cover;
30}