CSSボックスモデルの「コンテンツエリア」の問題〜高得点の方アドバイスお願いします！ _html/css_WEB-ITnose

私は CSS の教科書を持っており、マージンの重なりの問題を説明する例が載っています:
効果:

<div style="margin:10px; background:red;">    <p style="margin:20px; background:yellow;">aaaaaaa</p></div>

本の説明は次のとおりです:
この状況 (マージンの重なり) は、ブロックレベルの子が原因で発生します。要素 要素は、高さを計算する方法で作成されます。
要素に垂直方向の境界線やパディングがない場合、その高さは、その要素を含む子要素の上端と下端の境界線の間の距離になります。したがって、含まれる子要素の上端と下端の余白は、コンテナ要素の端からはみ出します。簡単な解決策があります。垂直方向の境界線またはパディングを追加することで、マージンが重なりなくなり、要素の高さは、その要素を含む子要素の上マージンと下マージンの間の距離になります。

質問:
1. 赤い部分の「高さ」は、要素 (div) を含むコンテンツ領域の高さを指しますか?
2. そうであれば、マージンが重なる理由は、要素を含むコンテンツ領域の高さが十分でないためであると理解できますか?
この場合、height 属性は要素のコンテンツ領域に高さを与えるため、div 要素の CSS に「height:200px;」を追加します。
でもまだ余白が重なっているのはなぜでしょうか？

質問が少し複雑で、ボックスモデルについてあまり詳しくなく、問題の説明があまり明確ではないため、よく読んでもう少し詳しく答えてください。とても書きやすいです、皆さんありがとうございます！ :)

ディスカッションへの返信 (解決策)

1. それは p の高さに等しい div の高さです
2. この方法では、ボーダーやパディングを使用して制限することはできません。サブ要素の範囲を指定すると、重複現象を排除できます。

あなたの本のコンテンツの高さと余白のオーバーレイに関する説明は偏っています。
マージンのオーバーレイ、w3c の説明は次のとおりです:
ブロックレベル要素 (display:block) の場合、アンフロートの垂直方向に隣接する要素の上下の境界線が圧縮されます。
わかりやすい例は、上下の 2 つの要素があり、上の要素の下枠が 5px、下の要素の上枠が 20px である場合、2 つの要素間の実際の距離は次のとおりです。 20px (2 つの境界値のうち大きい方) 。

これは、例のように、隣接する要素に親子要素も含まれる状況です。
この時、実際には子要素の高さとは関係ありませんが、親要素がpaddingやborderで区切られていないため、子要素の余白が親のコンテンツ領域の外に出てしまいます。要素。

あなたがどの本を読んでいるのか分からないので、別の本で読むことをお勧めします。

教えてもらいました、とても上手です。 。 。 。

1. 赤い部分の高さは div コンテンツ領域の高さであり、p コンテンツ領域の高さでもあります。 div の height 属性を設定していないため、デフォルトでは div の高さになります。
2. div の幅を明示的に設定した場合でも、div または p に垂直境界線またはパディングを設定しない場合は、div に十分な高さがある場合でも、 p の高さ全体 (マージンなどを含む) を収容するために、マージンは依然として p の上マージンが div の上マージンと一致することがあります。理由を尋ねる必要はありません。CSS2.1 標準ではこれを規定しています。垂直方向の境界線やパディングがなければ、通常のフローではブロック レベルのボックスにマージンが重なり、兄弟ボックス、親子ボックス、さらにはそれら自体にマージンが重なる可能性があります。
この知識については、W3school にアクセスして学ぶことができます。

昨日、家のインターネットが切断されました、助けてくれてありがとう！ ！ ！