0

以下のコードには、2 つの div ボックスがあります。1 つ目は float:left で、2 つ目は clear:left であるため、1 つ目の下に配置されます。私の質問は、margin-top:20px が最初の div をプッシュしないのはなぜですか?

<head>
 <style>
 div { width:100px; height:100px; background-color:green; }
 #box1 { float:left; }
 #box2 { background-color:red; clear:left; margin-top:20px; }
 </style>
</head>
<body>
 <div id="box1"></div>
 <div id="box2"></div>
</body>
4

1 に答える 1

0

うん、紛らわしい。マージンの折りたたみに関する CSS 仕様をお読みください。

具体的には、

「クリアランスのある要素の上マージンと下マージンが隣接している場合、そのマージンは次の兄弟の隣接するマージンと崩壊しますが、その結果のマージンは親ブロックの下マージンと崩壊しません。」

探している効果を得るには、次のように、クリアランスのない要素 (この場合は最初の div) にマージンを適用する必要があります。

http://jsfiddle.net/6bfYU/

于 2012-06-28T01:56:48.660 に答える