現在使用しているブラウザは360 Speed Browserです。
最初のコード:
<html><head><style type="text/css">html{border:1px solid blue;}body{border:1px solid red;}p{border:1px solid green;}div{border:1px solid red;margin:0px;}</style></head><body><div>div</div><p>p</p><p>p</p></body></html> のマージントップが存在し、視覚的検査が行われていることを示します。
次に、
の margin-top が0pxになります。
ちょっと矛盾しているように思えます。
質問はとても基本的なものです、冗談です、答えてください...
この投稿は net_lover によって最終編集されました: 2013-05-10 11:19:01
1 回目は、div にはデフォルトで垂直方向のマージンがないのに対し、body と p にはデフォルトでマージンがあるためです。
bodyとpを区切るdivがあるため、2つの垂直マージンには「垂直マージンオーバーレイ」の効果はありません。
垂直マージンオーバーレイの前提は、2 つの垂直マージンが隣接していることです。
2 回目では、div 要素が削除されます。これにより、本文の上マージンと p のデフォルトの上マージンが重なり、最終的に 2 つの小さい方の値が取得されます。
したがって、上マージンと外側マージンが等しい 2 つの要素は、一緒に「重なって」表示されます。
確かにちょっとわかりにくいですね。 。 。
CS はまだ理解できません。
1 回目は、div にはデフォルトで垂直方向のマージンがないのに対し、body と p にはデフォルトでマージンがあるからです。
bodyとpを区切るdivがあるため、2つの垂直マージンには「垂直マージンオーバーレイ」の効果はありません。
垂直マージンオーバーレイの前提は、2 つの垂直マージンが隣接していることです。
2 回目では、div 要素が削除されます。これにより、本文の上マージンと p のデフォルトの上マージンが重なり、最終的に 2 つの小さい方の値が取られます。
最終的な効果は、body と p の上部マージンの値が等しいことです。 。 したがって、上マージンと外側マージンが等しい 2 つの要素は、一緒に「重なって」表示されます。
確かにちょっとわかりにくいですね。 。 。
1番目と2番目のボディ境界線はどちらも実線なので、重なりません...
さらに、垂直方向の結合は、2つの値の大きい方を取ることです...
ご回答ありがとうございます！
レイアウトとブロックレベルのコンテキスト、バグは次の 2 つの理由で発生することがよくあります。
後ろに改行を追加します
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
