css - div には、margin top を持つ別の div の上に margin bottom があり、マージンは 1 つだけです

Question

私は他の上に1つのdivを持っています。上の div にはmargin-bottom: 10px、下の div にはmargin-top: 10pxがありますが、2 つの div の間には 10px のスペースしかありません。

実際の例: http://jsbin.com/efgok/1/edit

Css を含む HTML:

<div style="margin-bottom:10px; background: #e6e6e6;" id="one">one</div>
<div style="margin-top:10px; background: #ccc" id="two">two</div>

レンダリング:

Answer 1

それはマージン崩壊と呼ばれます。これは仕様ごとの動作です。詳しくはこちらをご覧ください。

基本的に、2 つの垂直余白が重なる場合、最大のものだけが考慮されます。20pxそれを修正するには、いずれかの要素に のマージンを与えます。