奇怪的保證金行爲

Question

這聽起來很愚蠢，但它真的讓我感到困惑。小提琴是在這裏：http://jsfiddle.net/rLL3p7k5/1/

<div id='a'></div> 
<div id='b'> 
    <div id="c"></div>text in box-b</div> 
<div id="d">text in box-d</div> 

CSS：

div { 
    width:400px; 
    height:100px 
} 
#a { 
    background:red 
} 
#b { 
    background:blue; 
} 
#c { 
    background:yellow; 
    width:50%; 
    height:50px; 
    margin:20px auto 100px auto 
} 
#d { 
    background:green; 
    color:white 
} 

箱-C的邊距正在箱和箱B之間的差距，我認爲，下邊距會做同樣的東西，並在box-b和box-d之間留下空隙，但實際上不管margin-bottom的值是多少，box-d總是會粘在box-b上。那麼，這種行爲差異背後邊緣和邊緣底部之間的差異是什麼？

Answer 1

添加margin-bottom:20px框-B如果你願意，也可以通過添加margin-top:20px框-d實現相同的：

div{width:400px;height:100px} 
 
#a{background:red} 
 
#b{background:blue;margin-bottom:20px} 
 
#c{background:yellow;width:50%;height:50px;margin:20px auto 100px auto} 
 
#d{background:green;color:white}

<div id='a'></div> 
 
<div id='b'><div id="c"></div>text in box-b</div> 
 
<div id="d">text in box-d</div>

希望保持差距：