gap 子と子の間隔を空ける | Web Creator 【Yasuhiro Ito】

意味

親要素の直下の子のあいだに、一定の空きを作る場合に使います。row-gap と column-gap をまとめた指定です。子の margin で隙間を足すより、端の子まで同じ間隔にしやすいです。

1つの値は縦横同じ、gap: 0.5rem 1rem は行間と列間を分けます。flex でも grid でも使えます。

HTMLとCSSをコピーして、自分のファイルへ貼り付ければ同じ見た目を確認できます。

HTML

<div class="row">
  <span>A</span>
  <span>B</span>
  <span>C</span>
</div>

CSS

.row {
  display: flex;
  gap: 0.75rem;
}
.row > span {
  background: #efeef8;
  padding: 0.4rem 0.65rem;
}

プレビュー

一緒に使う指定です。一覧から行き来できます。

出典: MDN Web Docs（`@mdn/browser-compat-data`）