示例代码贴在最前边
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>margin重叠和坍塌</title> <style> body{ font-size: 10px; } .father{ width: 150px; height:250px; background-color: #cccccc; margin-top: 20px; } .son-one , .son-two{ width:80px; height:80px; } .son-one{ background-color: greenyellow; margin-top:40px; margin-bottom: 35px; } .son-two{ background-color:red; margin-top:10px; margin-bottom:20px; }
.blank{ margin-top:35px; margin-bottom:40px; } </style></head><body> <div class="father"> <div class="son-one"> 这是第一个子元素 </div>
<div class="blank"></div> <div class="blank"></div> <div class="blank"></div> <div class="son-two"> 这是第二个子元素 </div> </div></body></html>1.兄弟子元素之间——margin重叠
子元素1的margin-bottom和子元素2的margin-top两者之间会发生重叠，两个数值之间取较大值，作为两个子元素之间的垂直间距。
在上文的实例中，子元素1的margin-bottom为35px，子元素2的margin-top为10px，二者发生重叠，最终距离为35px。
加入3个空div块之后发现，重叠原理相同。
2.父元素和子元素之间——margin坍塌
前提：父元素没有文字内容&&父元素没有border&&父元素没有padding-top
这时最终效果取二者的较大值。
当父元素的margin-top的值>=子元素的值时，例如
.father{ width: 150px; height:250px; background-color: #cccccc; margin-top: 20px; } .son-one{ background-color: greenyellow; margin-top:10px; margin-bottom: 35px; }这时父元素距离浏览器的顶部20px
当父元素的margin-top的值<子元素的值时,例如子元素的margin-top换为40px.这时父元素一起被顶下去，距离浏览器顶部40px
以上两种情况总结来说就是：
ps:父元素有文字 || border || padding-top的情况：子元素的margin-top相对于父元素计算，并且不会对父元素的位置产生影响。
3.解决margin的重叠和塌陷问题
BFC待更新
