サイト制作

CSSのgapは外側の余白も作る？カードの間隔とpadding・marginの違い

慈愛妃きづな

2026-11-07

この記事には広告・アフィリエイトリンクが含まれます。

カードを並べるときのgapは、行や列の間を指定する仕組みです。外枠の余白や、見た目の間隔が広がる理由を整理します。

gapは並んだ項目の間に入る

グリッドやフレックスでカードを並べるとき、項目同士の間隔に使えるのがgapです。各カードに別々の余白を付けなくても、並べる側の設定として隙間を管理できます。

ただし、gapは外枠とカードの間を一周する余白ではありません。カード同士の間は空いたのに、端のカードが枠へ近すぎる場合は、外側のpaddingなどを別に検討します。間の隙間と、周囲の余白を分けると設定がわかりやすくなります。

gapに値を一つ指定すると、行と列の両方へ同じ値が使われます。二つ指定する場合は、row-gap、column-gapの順です。グリッドなら、行間と列間を別々の広さにするイメージです。

フレックスでは、flex-directionによって主軸や折り返し行の向きが変わります。見た目の上下左右だけで覚えず、どの方向へ並べているかも確認しましょう。

要素のmarginや、justify-contentなどによる空間の配分が加わると、目に見える間隔はgapの値だけでは決まりません。gapを小さくしても広いままなら、隣の余白設定も見てみます。

最初は一定の長さで間隔を決め、狭い画面で折り返したときも確認すると原因を追いやすくなります。余白を直すときは、一つの値へ何種類もの役割を持たせないのがコツです。