0

「マージン崩壊」の概念については承知しています。しかし、ここで最初のボックスの上部に 10 ピクセルの余白が表示されないのはなぜですか。上部のボックス (ID が「first」) には、その上に 10 ピクセルの余白が必要です。これが正しい方法ではない場合、それは何ですか? そして、なぜこれがうまくいかないのか。

CSS:

#Main{
background-color: gray;
position: relative;
width: 200px;
height: 300px;  
}


.box{
position:relative;
height: 60px;
width: 175px;
background: black;
margin: 10px 10px 10px 10px;
}

HTML:

<div id="Main"> 
    <div id="first" class="box"></div>
    <div id="second" class="box"></div>
    <div id="third" class="box"></div>
</div>

親 div に 10px のパディングを与えることができる方法が 1 つあります。しかし、なぜこれがうまくいかないのでしょうか？

4

2 に答える 2

2

margin: 10px 10px 10px 10pxコード内の は、「メイン」ボックスも移動します。
IDが「最初」のボックスのみを移動する場合は、 position:relative; top: 10px;
jsfiddleデモ編集を使用

します。なぜこれが起こるのかはわかりませんがdisplay、「メイン」ボックスがblockデフォルトであるためだと思います。「メイン」
ボックスで 使用するdisplay: inline-block;と、問題が修正されます。( jsfiddle )

于 2013-05-26T09:45:31.950 に答える