CSSでマージン折りたたみルールが導入された理由は何ですか？

Question

この巧妙なルールセットが役立つ場合は、状況を把握できません。彼らは、ボックスモデルのシンプルさを壊し、レイアウトの異なる部分を組み合わせると、無限の問題の原因を提供します。それでは理由は何ですか？参考のため、

Rulesです。

更新：ルールは兄弟要素にとっては論理的ですが、マージンをツリーまで親要素に伝播する理由は何ですか？どんな種類の問題が解決しますか？例えば

：

<div style="margin: 20px; background-color: red;"> 
    <div style="margin: 20px;"> 
     <p style="margin: 100px;">red</p> 
    </div> 
</div> 
<div style="margin: 20px; background-color: blue;">blue</div> 

最上位のdivは100pxにだけ離間されています。

Answer 1

これは、選択肢があまり意味を持たないことに気づくまで、実際には意味をなさない状況の1つです。

おそらく分かるように、余白は要素間の距離を指定します。各要素を囲む「外側の埋め込み」ではありません。マージン20pxの2つの要素が隣り合っている場合、それらの間の距離は40pxではなく20pxです。

マージンは別の要素までの距離であるため、親要素の境界ではなく、要素から周囲の要素までの距離になります。

親要素の境界までマージンを数えた場合、div要素に要素を入れると、divには余白やパディングがありませんが、要素の間に余分なスペースが挿入されます。要素の周りのマージンは、その周囲に一続きのdivを追加した場合、同じままにする必要があります。

Answer 2

これは役に立ちましたか？

最も簡単な例：それぞれがmargin-topとmargin-bottomの段落と見出しのリスト。記事の上部と下部、およびさまざまな要素の間に余白が必要です。

マージンが崩壊すると、最初または最後の項目（元のCSS仕様の一部ではありません）に特別な余白を設定したり、コンテナを埋めたりすることなく実行できます。

しかし、私は全体として、それが無意味な点であることに同意します。

Answer 3

複数の段落を含む本文があるとします。各段落を2emで区切りたい場合は、最初の段落を前のコンテンツと2emで区切り、最後の段落を2emで区切ります。

段落を分離する上下のマージンが崩壊するので、これは簡単に、以下のCSSを用いて達成される：

p { 
    margin-top: 2em 
    margin-bottom: 2em; 
} 

余白が崩壊しなかった場合、これはマージンがスペースで区切られていることになります4emの、2emではなく。マージンが崩壊することなく、目的の効果を達成する唯一の方法は、最初の段落と最後の段落に対して、それらにクラスまたはIDを与える追加の規則を設定することです（テキストが変更された場合に維持する必要があります） 、またはそれ以外の不要な余分な要素にラップし、first-childと：last-child、または...を使用すると、あなたはそのアイデアを得ることができます。

私は崩壊マージンが発生しなかった場合は、これを保証することができ、SO重複の質問の多くは、上記のルールが:-)