外边距塌陷

今天写代码的时候偶然发现了外边距塌陷(margin collapse)这个问题，大致来说，就是这样


从上图很容易看到，.square的属性中   margin: 10px; 两个square的中间应该就有 20px的距离（上面的下边距+下面的上边距)，但实际情况只有10px，这就叫做外边距塌陷，实际外边距会是两者中较大者。上述情况为临近元素的外边距塌陷(Adjacent Elements)比较容易解决，可以通过只定义一个边距解决（譬如只定义上边距，下边距统统省略）。还有一种情况是父子元素的外边距塌陷(Parent
and Child Elements)，譬如这种



上图中，parent为child元素的父元素，parent底色为黑色，child 底色为粉红色，在右边CSS中，child有一属性，margin-top: 100px;理想中应该是父子元素之间有100px的间距，即第一格粉红色上面应该有一大片黑色，而实际情况中，child元素的margin-top: 100px; 变成了parent的属性，导致第一格粉红色上面是灰色，也就是container的颜色。

解决办法有很多，譬如加边框，或者采用padding（其实也得不到想象中的结果，只是规避了margin），这里介绍一种比较便捷的办法，加入占位符，  我们加入占位符后再来看看结果：



很显然，这得到了我们想要的结果，第一格粉红色元素上面有一大片黑色，也就是子元素与其父元素有了距离

（不知道为什么，直接截图后粘贴过一段时间后会被吞掉......以后改用上传图片吧）

参考文献：https://www.sitepoint.com/web-foundations/collapsing-margins/

  http://stackoverflow.com/questions/19718634/how-to-disable-margin-collapsing