当时说到了盒模型，盒模型包含着margin，为什么要在这里说margin呢？因为元素和元素在垂直方向上margin里面有坑。
我们来看一个例子：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>margin塌陷</title> <style type="text/css">
*{ margin:0; padding:0; }
.father{
overflow:hidden; width:300px; border:1px solid gray; }
.box1{ width:200px; height:50px; background-color:red; margin-bottom:20px; float:left }
.box2{ margin-top:50px; width:400px; height:150px; background-color:green; float:left }
span{ background-color:red; }
span.a{ margin-right:20px; }
span.b{ margin-left:20px; }
</style>
</head><body> <div class="father"> <div class="box1"></div> <div class="box2"></div> </div> <span class="a">内容</span> <span class="b">内容</span></body></html>
当给两个标准流下兄弟盒子 设置垂直方向上的margin时，那么以较大的为准，那么我们称这种现象叫塌陷。我们称为这种技巧叫“奇淫技巧”。记住这种现象，在布局垂直方向盒子的时候主要margin的用法。
当我们给两个标准流下的兄弟盒子设置浮动之后，就不会出现margin塌陷的问题。
margin：0 auto
div{
width: 780px;
height: 50px;
background-color: red;
/*水平居中盒子*/
margin: 0px auto;
/*水平居中文字*/
text-align: center;
}
当一个div元素设置margin：0 auto;时就会居中盒子，那我们知道margin:0 auto;表示上下外边距离为0，左右为auto的距离，那么auto是什么意思呢？
设置margin-left:auto；我们发现盒子尽可能大的右边有很大的距离，没有什么意义。当设置margin-right:auto；我们发现盒子尽可能大的左边有很大的距离。当两条语句并存的时候，我们发现盒子尽可能大的左右两边有很大的距离。此时我们就发现盒子居中了。
另外如何给盒子设置浮动，那么margin:0 auto失效。
使用margin：0 auto;注意点：
1.使用margin: 0 auto;水平居中盒子必须有width，要有明确width，文字水平居中使用text-align: center;
2.只有标准流下的盒子 才能使用margin:0 auto;
当一个盒子浮动了，固定定位，绝对定位(后面会讲)，margin:0 auto; 不能用了
3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;
另外大家一定要知道margin属性是描述兄弟盒子的关系，而padding描述的是父子盒子的关系
善于使用父亲的padding，而不是margin
如果让大家实现如图的效果，应该有不少的同学做不出来。
那么我们来看看这个案例，它的坑在哪里？
下面这个代码应该是大家都会去写的代码。
*{
padding: 0;
margin: 0;
}
.father{
width: 300px;
height: 300px;
background-color: blue;
}
.xiongda{
width: 100px;
height: 100px;
background-color: orange;
margin-top: 30px;
}
因为父亲没有border，那么儿子margin-top实际上踹的是“流” 踹的是行,所以父亲掉下来了，一旦给父亲一个border发现就好了。
那么问题来了，我们不可能在页面中无缘无故的去给盒子加一个border，所以此时的解决方案只有一种。就是使用父亲的padding。让子盒子挤下来。
原文地址：https://www.cnblogs.com/sunny666/p/10159849.html