24

この巧妙な一連のルールが役立つ状況を把握することはできません。それらはボックス モデルの単純さを壊し、レイアウトのさまざまな部分を組み合わせると無限の問題を引き起こします。では、その理由は何ですか？

参考ルール。

更新: ルールは兄弟要素に対して非常に論理的ですが、なぜマージンがツリーまで親要素に伝播する必要があるのでしょうか? どのような問題を解決しますか？

例えば：

<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 は、互いに 100 ピクセルの間隔で配置されます。

4

3 に答える 3

18

これは、代替案があまり意味をなさないことに気付くまで、実際には意味をなさない状況の 1 つです。

ご存じのとおり、余白は要素間の距離を指定するものであり、各要素を囲む「外側のパディング」ではありません。マージンが 20px の 2 つの要素が隣り合っている場合、それらの間の距離は 40px ではなく 20px です。

マージンは別の要素までの距離であるため、親要素の境界ではなく、要素から周囲の要素までの距離であることが理にかなっています。

マージンが親要素の境界までカウントされる場合、要素に要素を配置すると、要素自体にマージンやパディングがなくてもdiv、要素間に余分なスペースが発生します。div要素の周囲にスタイルなしを追加した場合、要素の周囲の余白は同じままにする必要がありますdiv。

于 2009-09-17T11:28:27.803 に答える
4

どんな時に役立つ？

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

マージンの折りたたみを使用すると、最初または最後のアイテム (元の CSS 仕様の一部ではありません!) に特別なマージンを設定したり、コンテナーにパディングしたりせずに実行できます。

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

于 2009-09-17T11:43:30.890 に答える
3

複数の段落を含む本文を考えてみましょう。各段落を 2em で区切り、最初の段落を前のコンテンツから 2em で区切り、最後の段落を次のコンテンツから 2em で区切るとします。

これは、次の CSS を使用して簡単に実現できます。これは、段落を区切る上下の余白が崩れるためです。

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

マージンが折りたたまれない場合、マージンは 2em ではなく 4em のスペースで区切られます。マージンの崩壊がなければ、目的の効果を達成する唯一の方法は、最初と最後の段落にいくつかの追加ルールを設定することです。これには、クラスまたは ID (テキストが変更された場合に維持する必要があります) を指定することが含まれます。 、またはそれ以外の場合は不要な追加の要素でそれらをラップし、:first-child と :last-child を使用するか、または... まあ、アイデアはわかります。

マージンの崩壊が発生しなかった場合、上記のルールが提供する一貫した間隔を実現するための回避策を求める多くの重複した質問がSOにあることを保証できます:-)

于 2009-09-17T11:44:03.623 に答える