ネストされたマージンはどのように折りたたまれますか?また、いつ折りたたまれないでしょうか?

ネストされた垂直マージンの崩壊について

多くの開発者は、ネストされた要素における垂直マージンの崩壊の概念に苦労しています。初心者向けにこの概念を単純化してみましょう。

2 つのネストされた div を想像してください:

<div style="margin-top:10px">
<div style="margin-top:20px">
A
</div>
</div> 

最初は、内側の div の 20 ピクセルのマージンが優先されます。ただし、覚えておくべき重要なルールが 2 つあります:

1.タッチで折りたたむ:
隣接する要素の余白が接触すると、要素は折りたたまれます。

2.ネストの寄り添い:
ネストされた要素をマージンで区切るのみの場合、内側の要素は外側の要素に対して「寄り添います」。

これらのルールを例に適用すると、

• ネストされた div のマージンが接触し、マージンの崩壊を引き起こします。
• マージンが大きいにもかかわらず、内側の div は外側の div の上端にぴったりとくっついています。

したがって、ブロック全体は、折りたたみマージンの最大値 (20px) を div 全体に適用します。

折りたたみの例外:

ただし、マージンの折りたたみは次の場合に動作が変わります。

• 要素間に境界線またはパディングがある。
• 内部要素が真にネストされていない (例: 浮動している、または絶対的に配置されている)。

折り畳まない例:

改行しない空白 (または境界線) を追加すると、マージンが区切られ、折り畳まれなくなります:

<div id="outer"> 
<div id="inner">
A
</div>
</div>

この例ではこの場合、内側の div のマージン (20px) はそれ自体のスペースに適用され、外側の div のマージン (10px) は周囲の領域に適用されます。

これらの規則と例外を理解することで、効果的に間隔を制御できるようになります。ネストされたマージンを持つ要素の要素。

以上がネストされたマージンはどのように折りたたまれますか?また、いつ折りたたまれないでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。