嵌套标签css属性设置问题

Question

图中2个正方形框框是2个section标签，红色的section嵌套在蓝色的section里面，我想让红色的section离蓝色的section顶部20px, margin-top: 20px; 写了这条css之后，效果却不是我想要的。 为什么红色的margin-top计算的方式不是以蓝色的section作为参照物？ 而是以蓝色的section的上一个同级块元素做参照物？？

如果我想要这个效果，是不是只能用position做绝对布局了?

Answer 1

这个叫做margin collapse，为什么会发生外边距合并？
两个原因：
两个条件：
1.两个或多个边距没有被非空内容，padding，border，clear分隔开；
2.处于文档流中(也就是是说，被float和absoluate的元素不会发生)
所以只要破坏任意一个条件就可以，比如个父div或子div增加边框等等

Answer 2

这是因为发生了外边距的合并，参考下面的资料：

http://www.w3school.com.cn/css/css_margin_collapsing.asp