ホームページ > ウェブフロントエンド > CSSチュートリアル > 垂直マージンの折りたたみはネストされた要素でどのように機能しますか?

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

DDD
リリース: 2024-11-01 00:56:02
オリジナル
456 人が閲覧しました

How Does Vertical Margin Collapse Work in Nested Elements?

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

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

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

垂直マージンの崩壊とは、隣接するマージンの垂直マージンが崩れる状況を指します。要素は折りたたまれたり、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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート