margin-塌陷问题

一、问题描述

当两个盒子在垂直方向上设置margin值时，会出现一个有趣的塌陷现象。

如图示

代码 页面呈现

最初目的是垂直剧中子盒子的，为子盒子设置了 margin-top: -170px，但是发现 父盒子已经height: 100%了，但是却多出了一块空白。

百思不得其姐……

忽然灵机一动，怕不是碰上了灵异的 塌陷问题了吧，添加了个padding-top: 1px; 果然……

特此总结，留作纪念

二、解决方法

解决maigin塌陷问题（父子盒子塌陷）的方法有：

1.给父盒子添加border（好用）

2.给父盒子添加padding-top（好用）

3.给父盒子添加overflow:hidden（好用）

4.父盒子:position:fixed

（宽收到了影响，跟子盒子同宽了，设置 width: 100%; 可以）

5.父盒子:display:table （不管用，样式奇怪，不按照position的文档流 布局了）

6.给子元素的前面添加一个兄弟元素 属性为:content:""; overflow:hidden;(不管用)

解决maigin塌陷问题（兄弟盒子塌陷，即外边距合并问题）的方法有：

1、给上面的盒子加个margin-bottom 或 给下面的盒子加个margin-top（这个距离等于两个盒子之间的距离——这基本等于没解决。。）

2、至少一个元素浮动或者绝对定位（参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing）

解决后