垂直マージンの折りたたみは CSS のネストされた要素でどのように機能しますか?

ネストされた垂直マージンの折りたたみについて

CSS における垂直マージンの折りたたみの概念は、特に要素をネストする場合に混乱を招く可能性があります。簡単な説明でメカニズムを分解してみましょう。

マージンの崩壊を制御する 2 つの重要なルール:

1. マージンの接触による崩壊: 隣接する要素の垂直マージンが接触したとき
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 サイトの他の関連記事を参照してください。