Css 保证金的奇怪行为

这听起来是个愚蠢的问题，但它确实让我困惑。小提琴在这里：

---

box-c的边距顶部在box-a和box-b之间留有一个间隙，我原以为边距底部也会做同样的事情，在box-b和box-d之间留有一个间隙，但实际上，无论边距底部值是多少，box-d都会始终坚持box-b。那么，页边距顶部和页边距底部之间的这种行为差异背后是什么呢？

如果需要，可以将

页边距底部：20px

添加到方框b中，也可以通过将

页边距顶部：20px

添加到方框d中来实现相同的效果：

div{宽度：400px；高度：100px}
#a{背景：红色}
#b{背景：蓝色；边距底部：20px}
#c{背景：黄色；宽度：50%；高度：50px；边距：20px自动100px自动}
#d{背景：绿色；颜色：白色}

框b中的文本
方框d中的文本

我的问题是，为什么页边顶部和页边底部的行为不同？

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

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
}