CSSにマージン崩壊ルールが導入された理由は何ですか？

StackOverflow https://stackoverflow.com/questions/1438114

  •  08-07-2019
  •  | 
  •  

質問

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

ルールを参照してください。

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

例：

<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間隔で配置されます。

役に立ちましたか？

解決

これは、選択肢が意味をなさないことに気付くまで、それが本当に意味をなさない状況の1つです。

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

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

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

他のヒント

いつ役立つか？

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

マージンを折りたたむと、最初または最後のアイテム（元のCSS仕様の一部ではありません！）に特別なマージンを設定したり、コンテナにパディングしたりすることなく実行できます。

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

複数の段落を含むテキスト本文を検討します。各段落を2emで区切り、最初の段落を前のコンテンツから2emで区切り、最後の段落を次のコンテンツから2emで区切る必要があります。

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

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

マージンが崩れなかった場合、マージンは2emではなく4emのスペースで区切られます。マージンを折りたたむことなく、目的の効果を達成する唯一の方法は、最初または最後の段落にいくつかの追加ルールを設定することです。これには、クラスまたはIDを与える必要があります、または他の場合は不要な余分な要素でそれらをラッピングし、：first-childおよび：last-childを使用するか、または...そう、あなたはアイデアを得る。

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top