ホームページ > 記事 > ウェブフロントエンド > 垂直マージンの折りたたみは CSS のネストされた要素でどのように機能しますか?
ネストされた垂直マージンの折りたたみについて
CSS における垂直マージンの折りたたみの概念は、特に要素をネストする場合に混乱を招く可能性があります。簡単な説明でメカニズムを分解してみましょう。
マージンの崩壊を制御する 2 つの重要なルール:
次の HTML 構造を考えてみましょう:
<code class="HTML"><div id="outer"> <div id="inner"> A </div> </div></code>
そして最初の CSS スタイル:
<code class="CSS">#outer { margin-top: 10px; background: blue; height: 100px; } #inner { margin-top: 20px; background: red; height: 33%; width: 33%; }</code>
このシナリオでは、ネストされた div のマージン (20px) がマージンの折りたたみをトリガーします。外側の div のマージン (10px) を加えた結果、ブロック全体の合計マージンは 20px になります。内側の div は、非マージン分離がないため、コンテナの先頭にぴったりとくっつきます。
ただし、境界線や非改行スペースなど、マージン間に何らかの分離を導入すると、 、崩壊が壊れています。これは、「接触している」とみなされなくなったマージンは折りたたまれないためです。
これらのルールは、通常のフローの外側の要素 (浮動要素や絶対的に配置された要素など) には適用されないことに注意してください。これらの概念を理解すると、CSS で要素をネストするときに垂直方向のマージンがどのように動作するかを明確に理解するのに役立ちます。
以上が垂直マージンの折りたたみは CSS のネストされた要素でどのように機能しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。