CSS | display: flexなどでのgapと子要素に付けるmarginの違い

2021-12-072022-06-29CSS フレックスボックス,CSS

flexプロパティやgridプロパティで利用できる隙間を指定可能なgapと並べる要素に付けるmarginの違いについて紹介しています。

gapとmarginの違い

gapとmarginの違いを確認する為に比較用の動作サンプルを用意しました。

上が親要素にgap、下が子要素にmarginを指定したものとなっています。

See the Pen CSS | Resolve the flex border collapse 01 by yochans (@yochans) on CodePen.

サンプルのHTMLコードです。
class名にそれぞれ「.gap」「.margin」を指定しています。

<div class="gap">
	<div></div><div></div><div></div><div></div><div></div>
</div>
<div class="margin">
	<div></div><div></div><div></div><div></div><div></div>
</div>

gapプロパティは「display: flex」と同じく親要素に指定する事ができます。

サンプルでは縦方向横方向の一括で「gap: 20px」を指定していますが、「gap: 20px, 10px」など縦横違う余白サイズを指定する事もできます。

.gap {
	display: flex;
	gap: 20px;
}

.gap div {
	flex-grow: 1;
	height: 50px;
	background: #4169e1;
}

marginは並べる子要素に対して指定しています。

.margin {
	display: flex;
}

.margin div {
	flex-grow: 1;
	height: 50px;
	background: #ff6347;
	margin: 10px;
}

marginは外側の余白も作るのに対し、gapは外側の余白を作らないという部分が大きな違いになります。

子要素へのmarginでもgapと同様の表現は可能ですが、非常にコード量が増えます。
外側の余白が無くても良い場合はgapで指定するのが非常にシンプルです。

また、親要素にmarginあるいはpaddhingを指定する事でgapのコードでも外側に余白を作る事が可能です。