▓ 隣接要素の上下マージンが相殺される P28
エビスコム著 作って学ぶ HTML+CSSグリッドレイアウト It is kind of you. 32px 1em;16px 全然できていない。 ▓ 隣接要素の上下マージンが相殺される P28 <h1>の下マージン 32px <figure> の上マージン 32px 文書のレイアウト <h1> の下マージン 32px <p> の上下マージン 1em (16px) <figure> の上マージン 32px 🧑💻 ChatGPT-5先生 (OpenAI) に相談しました。 なるほど、P28「隣接要素の上下マージンが相殺される（マージンの相殺／margin collapse）」のところですね。 この部分はHTMLタグの書き方の問題というよりも、**CSSの「仕様上の挙動」**が原因です。 --- 🔹 まず前提 次のようなHTMLを書いたとします： <h1>見出し</h1> <figure> <img src="sample.jpg" alt=""> </figure> そしてCSSで h1 { margin-bottom: 32px; } figure { margin-top: 32px; } とした場合、本来なら合計64pxの余白ができそうに思えますよね。 ところが、ブラウザで見ると 実際の間隔は32pxだけ になります。 --- 🔹 なぜか？ これが「マージンの相殺（margin collapse）」です。 > 上下に隣接するブロック要素の margin は重なって相殺され、より大きい方だけが有効になる。 つまり： <h1> の下マージン 32px <figure> の上マージン 32px → どちらも同方向（上下）なので、重なって 32px のままになります。 --- 🔹 消えないタグというより、「タグではなくボックスの性質」 これはHTMLタグの問題ではなく、 ブラウザのボックスモデル（CSSレイアウトエンジン）の仕様によるものです。 つまり「タグを入れたのに効かない」のではなく、 ブラウザが「まとめて計算して1つのmarginにした」...