3

この場合、最初の div の下の境界線と 2 番目の div の上端の境界線の間の垂直方向のギャップが 45px になると予想していますが、ブラウザーは下と上のマージンを折りたたみます。

ブラウザー表示での最初の div の下枠と 2 番目の div の上枠の効果的なギャップ b/w は 25px です。

理想的には、ボーダーはマージンの崩壊を防ぐ必要があります。ここでの間違いは何ですか？ポジショニングやフロートは適用していません。

jsfiddle コード

HTML

<body>
<div><p>A</p></div>
<div><p>B</p></div>
</body>

CSS 

div{
    width:200px;
    height:200px;
}
div:nth-child(1){
    background-color: #F52C6F; 
    border-bottom: 10px solid black;
    margin-bottom: 20px;
}
div:nth-child(2){
    background-color: #0ECCCC; 
    border-top: 10px solid yellow;
    margin-top: 25px;
}
4

3 に答える 3