3

以下のHTMLを持つ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
    <div style="width:400px;height:200px;background-color:Gray;margin-bottom:10px;"></div>
    <div style="width:400px;height:200px;background-color:Green;margin-top:10px;"></div>
</body>
</html>

これら 2 つの DIV の間のスペースはわずか 10 ピクセルです。

なんで？説明してください。

4

3 に答える 3

6

その動作は、マージンの縮小と呼ばれます。マージン値は追加されませんが、より高い値が使用されます。

特定のボックス間で垂直マージンが崩れる場合があります。

  • 通常のフローでブロック ボックスの 2 つ以上の隣接する垂直マージンが崩壊します。結果のマージン幅は、隣接するマージン幅の最大値になります。[…]
  • […]
于 2009-06-01T19:02:13.193 に答える
1

これはマージンの崩壊の良い説明です。基本的に、隣接するすべてのマージンは、CSS 仕様に従って、すべての常識に反して、互いに崩壊するようです。

于 2009-06-01T19:06:30.517 に答える
1

目的の効果を得るには、代わりに「パディング」を使用できます。マージンは常に折りたたまれます

于 2009-06-01T19:12:07.697 に答える