

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

画像を正方形にトリミングし、５個ずつ２列で表示します。  
以下のようにできているのですが、  
**それぞれの画像がくっつかず、余白をつけるようにしたい** です。  
[![画像の説明をここに入力](https://i.stack.imgur.com/cpzFX.png)](https://i.stack.imgur.com/cpzFX.png)

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

▼HTML

[code]

    <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>
    
[/code]

▼CSS

[code]

    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;
    }
    
[/code]


CC BY-SA 4.0
2021-01-01T10:13:45.877
73011
2021-01-01T16:32:28.510
2021-01-01T10:35:17.447
40231
40231
question
html css bootstrap
CSSにおいて正方形に余白がある状態にしたい


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

▼HTML

[code]

     <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>
    
[/code]

▼CSS

[code]

    .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;
    }
    
[/code]


CC BY-SA 4.0
2021-01-01T16:32:28.510
73014
2021-01-01T16:32:28.510
40231
73011
answer