margin
margin
属性为给定元素设置所有四个(上右下左)方向的外边距属性。也就是 margin-top
、margin-right
、margin-bottom
和 margin-left
四个外边距属性设置的简写。
尝试一下
语法
css
/* 应用于所有边 */
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
-
让浏览器自己选择一个合适的外边距。有时,在一些特殊情况下,该值可以使元素居中。
语法格式
margin =
<'margin-top'>{1,4}
<margin-top> =
<length-percentage> |
auto |
<anchor-size()>
<length-percentage> =
<length> |
<percentage>
<anchor-size()> =
anchor-size( [ <anchor-element> || <anchor-size> ]? , <length-percentage>? )
<anchor-element> =
<dashed-ident>
<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
示例
简单的例子
HTML
html
<div class="center">此元素会被居中。</div>
<div class="outside">此元素会显示在包含块之外。</div>
CSS
css
.center {
margin: auto;
background: lime;
width: 66%;
}
.outside {
margin: 3rem 0 0 -3rem;
background: cyan;
width: 66%;
}
更多的例子
css
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; /* 上边和下边:无外边距 */
/* 水平方向居中 */
贴士
水平居中
在现代浏览器中实现水平居中,可以使用 display
: flex;
justify-content
: center;
。
不过,在 IE8-9 这样的不支持弹性盒布局的旧式浏览器中,上述代码并不会生效。此时要实现在父元素中居中,可使用 margin: 0 auto;
。
外边距重叠
上下元素的下上外边距有时会重叠,实际空出的空间长度变为两外边距中的较长值。查看外边距重叠可找到更多信息。
规范
Specification |
---|
CSS Box Model Module Level 3 # margin |
初始值 | 该简写所对应的每个属性:
|
---|---|
适用元素 | all elements, except elements with table display types other than table-caption , table and inline-table . It also applies to ::first-letter . |
是否是继承属性 | 否 |
Percentages | refer to the width of the containing block |
计算值 | 该简写所对应的每个属性:
|
动画类型 | a length |
浏览器兼容性
BCD tables only load in the browser