CSS--Margin折叠的两种情况

本文简单总结一下css布局中常见的两种margin折叠情况，以及解决方法。

1、兄弟元素之间发生折叠

.box1, .box2{
 width: 200px;
 hieght: 200px;
 margin: 20px;
}

<div class="box1">hello</div>
<div class="box2">world</div>

大家觉得这 2个div 之间会发生什么？会合体呢？还是分开？来看看 DEMO1 margin折叠。

运行上面的代码，会发现box1和box2之间原本应有20px+20px的间距，但实际只有20px的间距。好吧，它们真的合体了。按照常规思路，这 2div之间的空白应该是第一个 p 的 margin-bottom 20px 加上第二 div 的 margin-top 20px，即 20 + 20px = 40px ，但结果却只有20px。这就是 margin折叠。

css1的说明：外边距用来指定非浮动元素与其周围盒子边缘的最小距离。两个或两个以上的相邻的垂直外边距会被折叠并使用它们之间最大的那个外边距值。多数情况下，折叠垂直外边距可以在视觉上显得更美观，也更贴近设计师的预期。

总结：
1. 兄弟元素之间，首先是非浮动元素 2. 其次只有垂直的上下margin会产生折叠（即margin-top, margin-bottom） 3. 折叠后取最大的margin值为最终值。

2、父子元素之间发生折叠

.parent{
	width: 200px;
	height: 200px;
	background: red;
}
.child{
	width: 200px;
	height: 200px;
	background: yellow;
	margin: 20px;
}

<div className="parent">
	<div className="child">child</div>
</div>

运行上面的代码，会发现parent和child之间，child的上边原本应有20px的间距，但实际它们之间没有边距。好吧，看来父子元素之间也会发生合体。这就是父子元素间的margin折叠情况。

解决办法：

1. demo1: 为parent元素或child添加属性：display: inline-block;
2. demo2: 为parent元素或child添加属性：float: left;
3. demo3: 为parent元素或child添加属性：overflow：!visible;的任何一种情况。
4. demo4: 为child元素添加属性: position: aboslute;
5. demo5: 为parent元素加上边框。

以上5种方法都可以解决父子元素margin折叠的问题，当然，还有其他方法也可以解决margin折叠，这里就不一一列举了，在这里给出一个官方的总结，不做具体原因分析，记住就可以啦~

3、如何避免margin折叠之6个原则？

1. margin 折叠元素只发生在块元素上；demo1;
2. 浮动元素不与其他元素 margin 折叠；demo2;
3. 定义了属性overflow且值不为visible（即创建了新的块级格式化上下文）的块元素，不与它的子元素发生margin 折叠；demo3;
4. 绝对定位元素的 margin 不与任何 margin 发生折叠。 特殊：根元素的 margin 不与其它任何 margin 发生折叠；demo4;
5. 如果常规流中的一个块元素没有border-top、padding-top，且其第一个浮动的块级子元素没有间隙，则该元素的上外边距会与其常规流中的第一个块级子元素的上外边距折叠。 demo5;
6. 如果一个元素的 min-height属性为0，且没有上或下边框以及上或下内边距，且 height 为0或者auto，且不包含行框，且其属于常规流的所有孩子的外边距都折叠了，则折叠其外边距。

了解了margin折叠的6原则，我们就不难消除margin折叠啦，比如上述的5个demo方法，我把它改成非块元素，让它浮动，让它绝对定位，让它 overflow:hidden, demo3,用边框隔开它们 …demo5…随你怎样，信手拈来。