外边距塌陷问题

外边距塌陷：
1、父级和子级之间
给子级上边的外边距，父级会跟着子级下来
解决方法：
1）给父级overflow: hidden;
2）给父级上边框
2、同级之间
在垂直方向上，外边距不会叠加，谁大听谁的
在水平方向上，外边距会叠加

案例：

（1）html

<div>
<p></p>
</div>
<h1></h1>

（2）css

*{
margin: 0px;
padding: 0px;
}
div{
width: 200px;
height: 200px;
background: tomato;
/*overflow: hidden;*/
border-top: 1px solid red;
/*margin-bottom: 100px;*/
display: inline-block;
margin-right: 100px;
}
div p{
width: 100px;
height: 100px;
background: green;
margin-top: 20px;
margin-left: 20px;
}
h1{
width: 200px;
height: 200px;
background: yellow;
/*margin-top: 100px;*/
display: inline-block;
margin-left: 100px;
}

外边距塌陷问题

原文：https://www.cnblogs.com/msw0803/p/11525832.html