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
}

box-c的margin-top正在box-a和box-b之间产生差距，我认为margin-bottom会做同样的事情并在box-b和box-d之间产生差距，但实际上无论margin-bottom值是多少，box-d总是会粘在box-b上。那么margin-top和margin-bottom之间的这种行为差异背后是什么呢？

Answer 1

如果需要，可以将margin-bottom:20px添加到box-b，或者通过将margin-top:20px添加到box-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>

希望保持差距：

边际的奇怪行为

1 个答案: