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

CSS 初心者のためのネストされた垂直マージンの折りたたみを理解する

ネストされた垂直マージンの折りたたみは、要素がどのように相互作用するかを制御する CSS レイアウトの基本概念です。相互にネストされています。これを理解するために、この動作を決定するルールを調べてみましょう:

• マージンの折りたたみ: 2 つのマージンが交わると、それらは 1 つのマージンに折りたたまれ、折りたたまれた値が最大になります。
• Margin Snuggling: マージンのみがネストされた要素をその包含要素から分離する場合、ネストされた要素は包含要素の先頭に「寄り添います」。
• フロー例外: マージンの折りたたみと寄り添いは、フローティング要素、絶対配置要素、または固定配置要素など、通常のフロー外の要素には適用されません。

これらのルールを示す次の例:

<code class="html"><div id="outer">
    <div id="inner">
        A
    </div>
</div></code>

これらのスタイルがあるとします:

<code class="css">#outer {
    margin-top: 10px;
    background: blue;
    height: 100px;
}
#inner {
    margin-top: 20px;
    background: red;
    height: 33%;
    width: 33%;
}</code>

• 外側と内側のマージンは接触するため折りたたまれ、合計 20 ピクセルのマージンになります。
• 内側の div は、それらを区切るものがないため、外側の div の先頭にぴったりと寄り添います。

ただし、要素間に非改行スペース文字を追加するなどのわずかな変更や、内側の div に境界線を付けると、マージンが崩れるのを防ぎます。これは、スペースまたは境界線によってマージン間に分離が作成されるためです。

これらのルールを理解することで、開発者はネストされた要素のレイアウト動作を予測および制御できるようになり、ブラウザー間の一貫性と予測可能な結果が確保されます。

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