外边距
即控制盒子和盒子之间的距离
- margin-left
- margin-right
- margin-top
- margin-bottom
外边距的复合写法同padding相同
外边距典型应用
1,水平居中
可以让块级盒子水平居中,需满足如下两个条件
- 盒子必须指定了宽度
- 左右外边距设置为auto,如 margin:0 auto;
行内元素或者行内块元素居中:给其父元素添加tect-olign:center 即可。
2,相邻块元素垂直外边距的合并
当上下两个相邻的块元素(兄弟关系)相遇时,如果上面的元素有下外边距,下面的元素有上外边距,则它们之间的垂直间距不是两个外边距之和,应取两个值中的较大者,这种现象称为相邻块元素垂直外边距的合并。
3,嵌套块元素垂直外边距的塌陷
对于两个嵌套关系(父子关系)的块元素,父元素有上外边距,同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。
3种解决方案:
- 为父元素定义上边框
- 为父元素定义上内边距
- 为父元素添加overflow:hidden
清除内外边距
网页元素很多都带有默认的内外边距,而且不同浏览器默认的也不一致。因此我们在布局前,首先要清除下网页元素的内外边距。
*{
padding:0; /*清除内边距*/
margin:0; /*清除外边距*/
}
这一段也是CSS的第一段代码。
注意:行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距。但是转换为块级和行内块元素就可以了。