CSS | 画像を余白付きで横並びさせる方法

CSS 画像,CSS

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

「画像を余白付きで横並びさせる」をCodePenで確認する

CSS 画像,CSS

Posted by Yousuke.U