画像の間に15pxの余白を空けたい

画像の間だけに15pxの余白を空けたいのですが、どのようにしたら良いのでしょうか？
教えてください????‍♀️

HTML
1<div class="photo">
2        <div class="photo-container">
3          <img src="./img/square.svg" alt="">
4          <img src="./img/square.svg" alt="">
5          <img src="./img/square.svg" alt="">
6          <img src="./img/square.svg" alt="">
7        </div>
8</div><!--/photo-->

css
1.photo{
2    .photo-container{
3      max-width: 800px;
4      margin: 0 auto;
5      display: flex;
6      flex-wrap: wrap;
7      justify-content: space-between;
8      img{
9        width: 50%;
10        padding: 0 15px 15px 0;
11      }
12    }
13  }

yambejp

2021/08/26 07:25 編集

scssですか？画像は横並びでよいですか？

cutegirl

2021/08/26 07:26

すみません。scssです。画像を左上　右上左下　右下という配置にしたくて、間にだけ15pxの余白を入れたいです。

yambejp

2021/08/26 07:32

画像の幅が50%だと間に隙間があると2個ならべるだけで100%超えませんか？

cutegirl

2021/08/26 07:33

やり方がわからないので、５０％というのも修正していただいて大丈夫です。

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

回答2件

ベストアンサー

display: flex; を使うやり方もあります。
画像要素を 44%（数値は適当）などにしておき、justify-content: space-between; をしてあげれば数値を左右の数値は指定せずスペースが空きます。
上下は padding なり margin で指定すれば期待通りの表示になると思います。

投稿2021/08/26 08:33