CSS | display: flexなどでのgapと子要素に付けるmarginの違い
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のコードでも外側に余白を作る事が可能です。
ディスカッション
コメント一覧
まだ、コメントがありません