最近便利なCSSおれおれAdvent Calendar 2023 – 11 日目

margin 、使わなくなりました。代わりに gap を使ってます。

例

<section class="section">
  <h1>Hello World!</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</section>

.section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

gap は Flexbox やグリッドで利用できます。あと Flexbox の初期値はインライン（横）方向なので、 flex-direction: column も置いてやります。

余白の意味

ブラウザー初期値だと見出しのレベルが高いほど余白が大きくなります。実際それで感覚的に正しいと思えます。

しかし考えてみると、余白があるのは「見出しがあるから」ではなく「別のセクション（節）が始まるから」です。余白は見出しではなくセクションに付くべきです。もちろんセクションは見出しで始まるので結果として同じに見えてしまいますが。

実際的な問題としては、margin を用いた余白は上下に余分な空白範囲を取ってしまうこともあります。margin-bottom であれば下に、 margin-top であれば上にです。回避方法は著名ですが、結局のところ「回避」が不要であればそれに越したことはありません。

スタックという考え方

この考え方は Every Layout で知りました。有料の書籍ですが、該当する Stack の章が無料公開されているので今すぐ読むことができます。

.stack > * + * {
  margin-block-start: 1.5rem;
}

(https://every-layout.dev/layouts/stack/#the-solution)

実装例が gap ではなく .stack > * + * からの margin-block-start なのはまあ時代の都合です。

本文は英語だけど図解見れば意味は取れるかと。日本語版も出版されています。

おしまい

Markdown から出てくるブログ記事なんかはスタック構造を取らないので、margin を使うしかないかなとは思います。でもアプリも含め自分で HTML/JSX を書く場合はスタックを意識して構造化してゆきましょう。

参考