CSS的外边距

外边距的使用方式

margin 属性用于设置外边距，即控制盒子和盒子之间的距离。

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

外边距典型应用

外边距可以让块级盒子水平居中的两个条件：

• 盒子必须指定了宽度（width）。
• 盒子左右的外边距都设置为 auto 。

常见的写法，以下三种都可以：

margin-left: auto; margin-right: auto; margin: auto; margin: 0 auto;

注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。

外边距合并

使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。

主要有两种情况:

1、相邻块元素垂直外边距的合并

​当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。

 

解决方案:
尽量只给一个盒子添加 margin 值。
2、嵌套块元素垂直外边距的塌陷
对于两个嵌套关系(父子关系)的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

解决方案:

• 可以为父元素定义上边框。
• 可以为父元素定义上内边距。
• 可以为父元素添加 overflow:hidden。

overflow:hidden(溢出隐藏)

如果是父子关系，子元素超出父元素所限制的大小可以使用overfiow:hidden，它可以强行将子元素溢出的那一部分给隐藏掉，但是并不会改变子元素的原先大小。