CSS | 画像を余白付きで横並びさせる方法
CSSで画像を余白付きで横並びさせる方法とサンプルコードを紹介しています。
画像を余白付きで横並びさせる
画像はそのままでも横に並びますので、CSSで余白付きで横並びさせる方法は複数あります。
このページでは「display」プロパティで「flex」指定で横並びにして、「gap」プロパティで画像同士の余白を付けています。
<div class="contents">
<img src="https://1-notes.com/wp-content/uploads/2023/06/slime-3.png" alt="">
<img src="https://1-notes.com/wp-content/uploads/2023/06/slime-3.png" alt="">
<img src="https://1-notes.com/wp-content/uploads/2023/06/slime-3.png" alt="">
<img src="https://1-notes.com/wp-content/uploads/2023/06/slime-3.png" alt="">
<img src="https://1-notes.com/wp-content/uploads/2023/06/slime-3.png" alt="">
<img src="https://1-notes.com/wp-content/uploads/2023/06/slime-3.png" alt="">
</div>サンプルでは親要素である「.sample」に「display: flex」を指定、「gap」プロパティで余白サイズの「5px」を指定しています。
また、折返しを可能にする「flex-wrap: wrap」プロパティも指定しています。
「gap」プロパティは「margin」プロパティとは違い要素同士の余白を指定します。
「margin」プロパティは隣接する要素がない外側にも余白を作るのに対し、「gap」プロパティは隣接する要素同士の間にのみ余白を作ります。
関連：CSS | display: flexなどでのgapと子要素に付けるmarginの違い | ONE NOTES
.contents {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.contents img {
width: 200px;
}