マージンオーバーラップの定義と計算ルール

マージンの重なり

中国語版 CSS2.1 仕様からの抜粋

CSS では、2 つ以上のボックス (兄弟である可能性がありますが、必ずしもそうではありません) の隣接するマージンが 1 つのマージンに結合されます。このようにマージンを結合することをコラプス
と呼び、結果として結合されたマージンをオーバーラップマージンと呼びます。

マージンの重なりの計算ルール

中国語版CSS2.1仕様より抜粋

2つ以上のマージンを結合した場合、マージン幅は結合されたマージン幅の最大値となります。負のマージンについては、正の隣接マージンの最大値から負の隣接マージンの絶対値の最大値を減算します。正のマージンがない場合は、隣接するマージンの絶対値の最大値を 0 から減算します

隣接マージンとは

CSS2.1 仕様の中国語版からの抜粋
次の場合に限り、2 つのマージンが隣接します:

• すべてはインストリームのブロックレベルのボックスに属し、同じブロックフォーマットコンテキスト内にあります。

• ラインボックス、ギャップ、パディング、境界線を持たず、それらを区切る境界線もありません (したがって、高さ 0 のラインボックスもあることに注意してください)

• はすべて垂直方向に隣接するボックスのエッジ (垂直方向に隣接するボックスのエッジ) です。次のペアのいずれかから:
  1. ボックスの上マージンとその最初のインフローの子の上マージン
  2. ボックスの下マージンと次のフロー内の次の兄弟 (その次のインフロー)親の高さの計算値が 'auto' の場合、最後のインフロー子の下マージンとその親の下マージン
  4. ボックスの上マージンと下マージン。ボックスは新しいブロック書式設定コンテキストを確立せず、min-height の計算値は 0、高さの計算値は 0 または 'auto' で、インフローの子はありません
  

マージンがある場合マージンの一部が別のマージンに隣接している場合、そのマージンに隣接しているとみなされ、マージンが折りたたまれています。

各条件の詳細な分析

1. それらはすべてインストリームのブロックレベルのボックスに属し、同じブロックフォーマットコンテキスト内にあります。

インストリーム要素とは何ですか?要素がフローティング要素、絶対配置要素、またはルート要素である場合、それはフロー外要素です。要素がフローの外側にない場合、その要素はフロー内要素と呼ばれます。

インストリームブロックレベルボックスは、インストリームブロックレベル要素によって生成されるボックスです。

結論 1: ルート要素のボックスマージンは重なりません (理由: ルート要素はブロックレベルのボックスですが、インフロー要素ではありません)。

以上がマージンオーバーラップの定義と計算ルールの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。