盒子模型中的 margin，外边距可以让块级盒子水平居中，但必须满足两个条件，
1.盒子必须指定宽度width
2.盒子的左右外边距都设置为auto
写法：margin：0 auto(上下是0左右是auto)
以上设置方法只能对于块级元素设置对弈其他的例如行内元素就不行因为行内元素无法设置width，但可以采用下面的放法直接采用text-align:center即可。注意是给他的父级元素添加上面属性让他处于中间。
外边距合并：
外边距塌陷：造成的原因，解决方案、全部都在下面的代码以及注释中大家注意去看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .father { width: 400px; height: 400px; background-color: purple; margin-top: 20px; /* border: 2px solid black;/*边框颜色也可以编程透明色*/ /* padding: 1px;*/ overflow: hidden; } .son { width: 200px; height: 200px; background-color: pink; margin-top: 100px;/*在这里我们给子元素添加一个外边距想让他的*/ /*距离父元素上边为100px但是显示出来的结果表示父元素和他一起向下100px这是为啥呢*/ /** 启示这个就叫嵌套块元素的垂直外边距塌陷 主要造成原因： 对于两个嵌套关系的块元素，父元素有外边距的同时， 子元素也有外边距就会造成父元素塌陷较大的外边值距离 谁的大塌陷谁的。 **/ /** 解决方案： 考虑给父元素有个边框只要有了边框就不会塌陷 结果确实如此 **/ /** 给父元素一个上内边距 只要给内边距无论多少都会产生隔开效果 **/ /** 给父元素添加属性overflow:hidden 这种方法更推荐因为不会改变盒子大小 **/ } </style> </head> <body> <div class="father"> <div class="son"></div> </div> </body> </html>
清除外边距：
网页元素有很多都自带内外边距，而且针对不同的默认浏览器值也不一致，因此我们在布局之前要清楚网页元素的内外边距
注意：在我们设置内外边距时尽量对于行内元素只设置左右，设置上下的时候不起作用的
如果非要设置就把它转化成行内块或者其他