cssで余白を重ならないようにするための画像とテキストコードの詳細な説明

マージンの重なり

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

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

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

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

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

隣接マージンとは

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

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

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

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

  各条件の詳細な分析

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

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

インストリームブロックレベルボックスは、インストリームブロックレベル要素によって生成されるボックスです。
結論 1: ルート要素のボックスのマージンは重なりません (理由: ルート要素はブロックレベルのボックスですが、インフロー要素ではありません)。


例を挙げてください

以上がcssで余白を重ならないようにするための画像とテキストコードの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。