外边距(margin)
margin属性用于设置外边距,即控制盒子和盒子之间的距离
| 属性 | 作用 |
|---|---|
| margin-left | 左外边距 |
| margin-right | 右外边距 |
| margin-top | 上外边距 |
| margin-botom | 下外边距 |
外边距典型应用
外边距可以让块级盒子水平居中, 但是必须满足两个条件：
①盒子必须指定了宽度(width)
②盒子左右的外边距都设置为auto
.header{ 960px; margin: 0 auto}
常见的写法:
margin-left:auto; margin-right:auto;
margin:auto;
margin: 0 auto;
外边距合并
1.使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。
2.嵌套块元素垂直外边距的塌陷
对于两个嵌套关系(父子关系)的块元素,父元素有上边距同时子元素也有上边距,此时父元素会塌陷较大的外边距值。
注：浮动的盒子不会有外边距合并的问题
解决方案:
①可以为父元素定义边框
②可以为父元素定义内边距
③可以为父元素添加overflow:hidden