この記事はなに？
CSS の gap プロパティは、Flexbox や Grid で使える、要素間の余白を指定することができます。
繰り返しの要素や、等間隔のパターンでその利便性を発揮すると思います。
便利な gap ですが、便利が故に安易に使ってるんじゃないか？と思うことがありました。
この記事では、世の中にある様々な意見を否定したいわけではなく、私が考える gap を使ったほうが良いケースと、他の余白管理をしたほうが良いケースについてまとめたいと思います。
gap を使ったほうが良いケース
gap プロパティは、親要素がその子要素間のスペースを一元的に管理する際に、利用するのは良いケースだと私は考えています。
事例1：繰り返し同じ要素が並ぶUI
特に繰り返し要素が段落ちすることもある場合は、余白管理がしやすくなります。
例としてあげるなら、カードのリストなどがあります。
<div class="card-list">
<div class="card">カード1</div>
<div class="card">カード2</div>
<div class="card">カード3</div>
</div>
.card-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px 24px;
}
.card {
/* カードのスタイル */
}
事例2：等間隔に配置されるUI
例えば、ナビゲーションなどがあげられます。
<nav>
<button>Home</button>
<button>About</button>
<button>Contact</button>
</nav>
nav {
display: flex;
gap: 16px; /* ボタン間の横の余白をまとめて指定 */
}
事例3：条件によって、DOMが表示・非表示されるケース
例えば、先にあげたカードのUIに、NEW というアイコンがあるときとない時があるとします。
表示・非表示される New のアイコンが margin を持てば管理出来る話なので、これは絶対 gap を使ったほうがいいという事例ではないのですが、gap は要素が存在しないときには反映されませんし、存在すれば反映されます。
下の画像でいうと、黄色の余白 4px があるかないかといったイメージです。
<div class="card">
<h2 class="card_title">カードのタイトル</h2>
<div class="card_label_list">
<p class="card_new_label">New</p>
<p class="card_label">カードのラベル</p>
</div>
</div>
.card_label_list {
gap: 4px;
}
gap 以外の余白管理をしたほうが良いケース
事例1：無駄なCSSが増えるケース
margin が適しているのに、 gap を無理に使っているようなことがあります。
例えば下記のようなシンプルなカードがあって、タイトルとラベルの間に 8px の余白を取りたい場合を例にしたいと思います。
NG例：gap を利用した場合
<div class="card">
<h2 class="card_title">カードのタイトル</h2>
<p class="card_label">カードのラベル</p>
</div>
.card {
display: flex;
flex-direction: column;
gap: 8px;
}
カードのUIの中身がタイトルとラベルの2つだけど、Flexbox を利用した場合、縦並びの指定をする flex-direction: column; も必用になり、最低でも3つの CSS プロパティを使うことになると思います。
OK例：margin-top を利用した場合
HTMLは上から下に要素が配置されるので、先ほどと同じHTMLを使い、単純に card_label に margin-top: 8px; をつけるだけで同じUIが実現できると思います。
.card_label {
margin-top: 8px;
}
事例2：過剰にHTMLタグを増やすケース
gap を使うためには、 Flexbox や Grid にする必用があります。
これらは親要素と子要素の関係になる必要があり、場合によっては、コードの可読性と保守性の低下を招く事例だと考えています。
先程のカードに画像や日付も追加して一緒に見てみましょう。
- 画像とカードのタイトルの間の余白は
8px - カードのタイトルとラベルの間の余白は
8px - ラベルと日付の間の余白は
4px
にしたいとします。
NG例：ラベルと日付を div で囲む
<div class="card">
<img alt="" src="sample.png" />
<h2 class="card_title">カードのタイトル</h2>
<div class="card_contets">
<p class="card_label">カードのラベル</p>
<time datetime="2025-07-07">2025/07/07</time>
<div>
</div>
.card {
display: flex;
flex-direction: column;
gap: 8px;
}
.card_contets {
display: flex;
flex-direction: column;
gap: 4px;
}
.card の gap の影響を受けないように、カードのラベルと日付を囲む div を作って、更に gap を使うために Flexbox 化していることがあります。
このカードのラベルと日付を囲む div が過剰ではないかと私は考えています。
今回は余白の説明のためにシンプルなHTMLとCSSにしていますが、実際にスタイルを当てるときには、各要素に color や font-size, line-height etc… と増えていくと思います。
card_contets 内の要素が増えたり、 Flexbox がどうしても必要になってくるような場合でなければ、コードの可読性や保守性がためてるか考えた上で、過剰にHTMLを増やしていないかを判断できたらと考えています。
今回のケースは、 .card_contets の中身は2つだけなので、NG例としてあげました。
OK例： margin-top で個別管理する
<div class="card">
<img alt="" src="sample.png" />
<h2 class="card_title">カードのタイトル</h2>
<p class="card_label">カードのラベル</p>
<time datetime="2025-07-07">2025/07/07</time>
</div>
.card_title {
margin-top: 8px;
}
.card_label {
margin-top: 8px;
}
time {
margin-top: 4px;
}
これぐらいの量であれば、gap より margin の管理のほうが適切だと思います。
※ .card_title と .card_label は一緒に指定しまえば行数は減りますが、実際には個別に他に CSS でスタイリングすると思いますので、行を分けました。
事例3：gap が制限になるケース
flex-basis や width をパーセンテージで指定する際に、gap の値がピクセル単位だと、合計幅の計算が複雑になることがあります。
特にレスポンシブデザインでアイテム数が変化する際に、この問題が顕著になります。calc() 関数を使えば解決できることが多いですが、記述が複雑になり、直感的でないことがあります。
例: width: 33.33%; の3列レイアウトで gap: 20px; を設定すると、各アイテムの実際の幅は 33.33% - (2/3 * 20px) のような計算が必要になり、ブラウザの描画によってはわずかにオーバーフローしたり、次の行に送られたりする可能性があります。
gap が本当に適切か考えてみましょう
gap プロパティは、現在のCSS レイアウトにおいて非常に便利で、欠かせないものであることに疑いの余地はないと思います。
IE のサポートが終了し、 gap を使えるぞってなった時、とっても嬉しかったことを覚えています。
しかし、便利ゆえに「とりあえず gap を使えばOK」という安易な思考に陥ってしまうと、コードの意図が不明瞭になったり、予期せぬレイアウトの崩れを引き起こしたりする可能性があります。
それぞれのプロパティの特性を理解し、適切な場所で適切に使い分けることが、より読みやすく、保守しやすい CSS につながるのではないでしょうか。
おわりに
ここまで目を通していただきありがとうございました。
この記事が誰かの役に立てば幸いです。