前端-CSS-盒子模型外边距margin

1、margin属性用于设置外边距，可控制盒子与盒子间的距离

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

2、margin简写模式：

        2.1 margin：10px；代表上边距、下边距、左边距、右边距均为10px

        2.2 margin：10px 5px；代表上边距、下边距为10px，左边距、右边距为10px

3、外边距应用：

        3.1 块级盒子水平居中对齐：

               3.1.1  外边距可实现块级盒子水平居中对齐，同时需满足2个条件：1）盒子必须指定了宽度（width）   2）盒子左右的外边距均为auto

.header{width:600px;margin:0 auto;}

               3.1.2  若想让行内块元素/块元素实现水平居中，则需给其父元素添加  text-align:center 即可 

        3.2 外边距合并：对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会“塌陷”较大的外边距值。解决此问题，可 1）为父元素定义上边框 2）为父元素定义上内边距 3）为父元素添加  overflow：hidden