margin
注意： 外边距控制的是元素外部空出的空间。相反，
padding操作元素内部空出的空间还有就是上、下外边框的设置对内联元素无效，如：
<span>、
margin属性构成
-
margin-top：
上边距 -
margin-bottom：
下边距 -
margin-left：
左边距 -
margin-right：
右边距
语法
/* 应用于所有边 */ margin: 1em; margin: -3px; /* 上边下边 | 左边右边 */ margin: 5% auto; /* 上边 | 左边右边 | 下边 */ margin: 1em auto 2em; /* 上边 | 右边 | 下边 | 左边 */ margin: 2px 1em 0 auto; /* 全局值 */ margin: inherit; margin: initial; margin: unset;
注意：取值可以为负数！取值为负时元素会比原来更接近临近元素
margin 属性接受 1~4 个值：
- 当只指定一个值时，该值会统一应用到全部四个边的外边距上。
- 指定两个值时，第一个值会应用于上边和下边的外边距，第二个值应用于左边和右边。
- 指定三个值时，第一个值应用于上边，第二个值应用于右边和左边，第三个则应用于下边的外边距。
- 指定四个值时，依次（顺时针方向）作为上边，右边，下边，和左边的外边距。
margin: 5%; /* 所有边：5% 的外边距 */ margin: 10px; /* 所有边：10px 的外边距 */ margin: 1.6em 20px; /* 上边和下边：1.6em 的外边距 */ /* 左边和右边：20px 的外边距 */ margin: 10px 3% -1em; /* 上边： 10px 的外边距 */ /* 左边和右边：3% 的外边距 */ /* 下边： -1em 的外边距 */ margin: 10px 3px 30px 5px; /* 上边：10px 的外边距 */ /* 右边：3px 的外边距 */ /* 下边：30px 的外边距 */ /* 左边：5px 的外边距 */ margin: 2em auto; /* 上边和下边：2em 的外边距 */ /* 水平方向居中 */ margin: auto; /* 上边和下边：无外边距 */ /* 水平方向居中 */
备注
1.水平居中
在 IE8-9 这样的不支持弹性盒布局的旧式浏览器中，要实现在父元素中居中，可使用 margin: 0 auto;
2. 外边距重叠
上下元素的下上外边距有时会重叠，实际空出的空间长度变为两外边距中的较长值，也就是说：谁的外边距大就显示谁的外边距(塌陷)
怎么解决呢？
（1）如果元素处于兄弟关系，可以选择只给一个盒子设置margin
（2）如果元素处于嵌套关系，可以选择：给父亲添加padding、给父亲添加透明下边框、给父亲加overflow：hidden(FTB)
内容来源于网络如有侵权请私信删除
文章来源: 博客园
- 还没有人评论，欢迎说说您的想法！
客服
