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

ネストされた垂直マージン崩壊のメカニズム

ネストされた要素における垂直マージン崩壊の概念を理解することは、初心者にとって難しい場合があります。この記事では、簡単な説明と例でこの動作をわかりやすく説明します。

垂直マージンの崩壊の基本

垂直マージンの崩壊とは、隣接するマージンの垂直マージンが崩れる状況を指します。要素は折りたたまれたり、1 つのマージンに結合されたりします。この折りたたみは、2 つ以上の垂直マージンが接触し、単一のより大きなマージンが生じる場合に発生します。

ネストされた要素とマージンの折りたたみ

要素が相互にネストされている場合、垂直マージンの折りたたみには、独自のルール セットが適用されます。ネストされた項目は「寄り添い」として知られる現象を示し、境界線や先行テキストなどの特定の要素で区切られていない限り、コンテナの先頭にぴったりと整列します。

例

次の HTML 構造について考えてみましょう。

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

外側の div のマージントップが 10 ピクセルで、内側の div のマージントップが 20 ピクセルの場合、垂直マージンは 20 ピクセル (最大値) に縮小されます。 2 つの余白のうち）。その結果、以下に示すように、内側の div は外側の div の上部に寄り添います。

[ネストされたマージン崩壊のイメージ]

マージン崩壊の防止

崩壊は以下を使用することで防ぐことができます:

• ネストされた要素間の境界線
• コンテナ内の先行コンテンツ (テキストなど)
• なし-空白の破壊

これらの要素のいずれかを導入すると、折りたたみメカニズムが破壊され、個々のマージンが適用されます。

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