1

複数のDIVがmargin-topとmargin-bottomの両方でスタックされているシナリオがありますが、margin-topがある場合はmargin-bottomが無視されます。私はそれがどのように起こるかを説明できませんでした。

html

<div class='box'>
<div class='item'>1</div>
<div class='item'>2</div>
<div class='item'>3</div>
<div class='item'>4</div>
<div class='item'>5</div>
<div class='item'>6</div>
<div class='item'>7</div>
<div class='item'>8</div>
</div>​

css

.box{
    width:100%;
    height:300px;

}

.item{
    list-style: none;
    display:block;
    margin-top:20px;
    margin-bottom:20px;
    width:100%;
    height:50px;                
    background-color:red;
}

アイテムをfloat：leftに設定すると、margin-bottomを適切に無効にできます。

左に浮かぶdivによるCSS

.item{
    list-style: none;
    float:left;
    display:block;
    margin-top:20px;
    margin-bottom:20px;
    width:100%;
    clear:both;
    height:50px;                
    background-color:red;
}     ​

これは、それをよりよく説明するためのjsfiddleリンクです。クロムとFirefoxでテスト済み。誰かがそれがどのように起こるか説明できますか？

4

1 に答える 1

2

私のやや簡潔なコメントについて詳しく説明します。

次のようなコードがあると想像してください。

<body>
    <p>A paragraph</p>
    <p>Another paragraph</p>
    <p>A final paragraph</p>
</body>

そしてあなたのCSSは：

p {
    margin-top: 10px;
    margin-bottom: 10px;
}

マージンの折りたたみが発生しなかった場合、上部に10ピクセルのマージン、下部に10ピクセルのマージンができますが、段落間に20ピクセルのマージンがあり、これは多くの場合、必要なものではありません。

これを解決するために、ブラウザは上下の余白を互いに折りたたんで、段落（または他のブロックレベルの要素）間のギャップが上下の余白の大きい方に等しくなるようにします。

それがあなたのコードで起こっていることです。

于 2012-08-18T17:46:55.130 に答える