margin:指盒子的外边距；
margin的语法格式：
一个值，表示上右下左方向：如:margin:10px;
两个值,分别表示上下和左右：如：margin:n m; n表示上下方向，m表示左右方向;
三个值，分别表示上，左右，下：如：margin：n m o； n表示上方向，m表示左右方向，o表示下方向;
四个值，分别表示上，右，下，左方向：如marin：n m o p；n表示上方向，m表示右方向，o表示下方向，p表示左方向;
但是：
margin不同于padding，margin存在两个特殊性，1.垂直塌陷，2，包含垂直塌陷；
这是我们在编程中经常碰到的问题；我们可以去避免还有解决它。
首先，先说第一点，1.垂直塌陷。
什么是垂直塌陷？
垂直塌陷是指，两个盒子之间，同时设置了margin失效的问题，举一个例子。例如盒子1设置了margin：20px；而盒子2设置了margin：10px；我们可能觉得它们之间会有30px的间距，但是事实上却是只有20px，这就是我们所说的垂直塌陷。我们如何解决它呢？目前没有解决的方案，只能我们去避免它,不要同时给两个兄弟盒子之间设置相同的margin，如果都设置了margin，浏览器只会默认选择数值大的margin值。
第二点：2.包含垂直塌陷
什么是包含垂直塌陷？（注意包含垂直塌陷只存在于垂直方向，不存在于水平方向）
包含的意思就是指存在包裹关系的盒子。
举一个例子：父盒子里面有一个子盒子，当我们想让子盒子距离父盒子的顶部30px时；
我们会给子盒子设置margin-top:30px;我们觉得这样子盒子就会距离父盒子的顶部30px，但是，事实是子盒子距离父盒子顶部还是为0；但父亲盒子会垂直掉落。这就是我们所说的包含垂直塌陷。
我们如何去解决这个问题呢？
我们有两种解决方案，第一种
1.给父盒子加一个边框。这样就可以解决包含垂直塌陷的问题；
2.给父盒子加overflow：hidden；这样就可以解决包含垂直塌陷的问题。

margin:指盒子的外边距；
margin的语法格式：
一个值，表示上右下左方向：如:margin:10px;
两个值,分别表示上下和左右：如：margin:n m; n表示上下方向，m表示左右方向;
三个值，分别表示上，左右，下：如：margin：n m o； n表示上方向，m表示左右方向，o表示下方向;
四个值，分别表示上，右，下，左方向：如marin：n m o p；n表示上方向，m表示右方向，o表示下方向，p表示左方向;
但是：
margin不同于padding，margin存在两个特殊性，1.垂直塌陷，2，包含垂直塌陷；
这是我们在编程中经常碰到的问题；我们可以去避免还有解决它。
首先，先说第一点，1.垂直塌陷。
什么是垂直塌陷？
垂直塌陷是指，两个盒子之间，同时设置了margin失效的问题，举一个例子。例如盒子1设置了margin：20px；而盒子2设置了margin：10px；我们可能觉得它们之间会有30px的间距，但是事实上却是只有20px，这就是我们所说的垂直塌陷。我们如何解决它呢？目前没有解决的方案，只能我们去避免它,不要同时给两个兄弟盒子之间设置相同的margin，如果都设置了margin，浏览器只会默认选择数值大的margin值。
第二点：2.包含垂直塌陷
什么是包含垂直塌陷？（注意包含垂直塌陷只存在于垂直方向，不存在于水平方向）
包含的意思就是指存在包裹关系的盒子。
举一个例子：父盒子里面有一个子盒子，当我们想让子盒子距离父盒子的顶部30px时；
我们会给子盒子设置margin-top:30px;我们觉得这样子盒子就会距离父盒子的顶部30px，但是，事实是子盒子距离父盒子顶部还是为0；但父亲盒子会垂直掉落。这就是我们所说的包含垂直塌陷。
我们如何去解决这个问题呢？
我们有两种解决方案，第一种
1.给父盒子加一个边框。这样就可以解决包含垂直塌陷的问题；
2.给父盒子加overflow：hidden；这样就可以解决包含垂直塌陷的问题。