ホームページ > 記事 > ウェブフロントエンド > ネストされたマージンはどのように折りたたまれますか?また、いつ折りたたまれないでしょうか?
ネストされた垂直マージンの崩壊について
多くの開発者は、ネストされた要素における垂直マージンの崩壊の概念に苦労しています。初心者向けにこの概念を単純化してみましょう。
2 つのネストされた div を想像してください:
<div style="margin-top:10px"> <div style="margin-top:20px"> A </div> </div>
最初は、内側の div の 20 ピクセルのマージンが優先されます。ただし、覚えておくべき重要なルールが 2 つあります:
1.タッチで折りたたむ:
隣接する要素の余白が接触すると、要素は折りたたまれます。
2.ネストの寄り添い:
ネストされた要素をマージンで区切るのみの場合、内側の要素は外側の要素に対して「寄り添います」。
これらのルールを例に適用すると、
したがって、ブロック全体は、折りたたみマージンの最大値 (20px) を div 全体に適用します。
折りたたみの例外:
ただし、マージンの折りたたみは次の場合に動作が変わります。
折り畳まない例:
改行しない空白 (または境界線) を追加すると、マージンが区切られ、折り畳まれなくなります:
<div id="outer"> <div id="inner"> A </div> </div>
この例ではこの場合、内側の div のマージン (20px) はそれ自体のスペースに適用され、外側の div のマージン (10px) は周囲の領域に適用されます。
これらの規則と例外を理解することで、効果的に間隔を制御できるようになります。ネストされたマージンを持つ要素の要素。
以上がネストされたマージンはどのように折りたたまれますか?また、いつ折りたたまれないでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。