margin 属性为给定元素设置所有四个(上下左右)方向的外边距属性。

也就是 margin-top,margin-right,margin-bottom,和 margin-left 四个外边距属性设置的简写。

margin实列:

margin: 1em;
margin: 5% 0;
margin: 10px 50px 20px;
margin: 10px 50px 20px 0;
margin: 0;

注意:上、下外边框的设置对不可替换内联元素,如 <span> 和 <code>,无效。

语法:

/* 应用于所有边 */
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 个值。每个值可以是 <length>,<percentage>,或 auto。取值为负时元素会比原来更接近临近元素。

当只指定一个值时,该值会统一应用到全部四个边的外边距上。

指定两个值时,第一个值会应用于上边和下边的外边距,第二个值应用于左边和右边。

指定三个值时,第一个值应用于上边,第二个值应用于右边和左边,第三个则应用于下边的外边距。

指定四个值时,依次(顺时针方向)作为上边,右边,下边,和左边的外边距。

可取值

length

以固定值为外边距。

percentage

相对于包含块的宽度,以百分比值为外边距。

auto

让浏览器自己选择一个合适的外边距。有时,在一些特殊情况下,该值可以使元素居中。

小贴士

水平居中

在现代浏览器中实现水平居中,可以使用 display: flex; justify-content: center;。

不过,在 IE8-9 这样的不支持弹性盒布局的旧式浏览器中,上述代码并不会生效。此时要实现在父元素中居中,可使用 margin: 0 auto;。

外边距重叠

上下元素的下上外边距有时会重叠,实际空出的空间长度变为两外边距中的较长值。查看外边距重叠可找到更多信息。