Margin的合并和塌陷现象

Margin的合并

外边距折叠现象也叫合并现象，这个只会出现在块级元素之中出现，行内和行内块并不会发生

如下图所示，给红色盒子一个margin-bottom: 30px，给蓝色盒子一个margin-top: 30px。正常情况下我们会认为两个盒子的间距应该为上下边距相加为120px，但事实并非如此。 由图清晰可见两个盒子之间的间距为30px，并不是两个盒子上下边距之和。

我们重新赋予蓝盒子一个向上的外边距为100px，这时通过下图我们能够看到，红盒子的外边距依旧还在，但是中间的间隔已经是100px。

红盒子的外边距和蓝盒子的外边距

出现的原因：上下的块级元素同时设置了垂直外边距，中间的距离只会取最大值

解决办法，如果中间需要多大，只给一个设置就可以了，不要同时设置，尽量避免

Margin的塌陷

如图展示，互相嵌套的两个盒子，给子元素的盒子设置向上外边距

加了外边距后

出现的原因：互相嵌套的块级元素，给子元素设置上外边距，会导致父元素也一起跟着掉下来

解决办法：1、因为子元素的盒子和父盒子的上边缘边界重合了，给子元素作用了margin-top，但是上面的作用域也同时是父元素的区域，所以子元素撑开后，父元素也被撑开了，所以给父元素设置一个边框border-top: 1px solid transparent。2、同理也可以设置内边距padding-top: 1px;3、溢出隐藏：overflow: hidden4、因为都是块级元素才会产生的问题，所以从根源解决，把父元素变为行内块元素display: inline-block