CSS 学习笔记（九）

外边距

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

相关属性有：

margin-left:左外边距

margin-right:右外边距

margin-top:上外边距

margin-bottom:下外边距

margin 简写的方式和代表的意思和 padding 相同。

我们可以用外边距来做什么呢？它的典型应用就是可以让块级盒子水平居中，但是必须满足两个条件，即盒子必须指定了宽度，且盒子左右的外边距都设置为 auto。

有三种常见写法：

margin-left:auto;margin-right:auto;margin:auto;margin:0 auto;(常用)

那我们如果想让行内元素或者行内块元素水平居中，只要给其父元素添加text-align:center即可。

外边距合并

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

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

2.嵌套块元素垂直外边距的塌陷

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

清除内外边距

我们不难发现，网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。具体格式如下：

* {  padding:0;清除内边距  margin:0; 清除外边距}

我们要尽量给行内元素只设置左右的内外边距，因为上下内外边距不起作用，如果我们想要设置上下左右内外边距，可以转化为块级元素，块级元素可以设置上下左右内外边距。