We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

概述

margin属性为给定元素设置所有四个(上下左右)方向的外边距属性。这是四个外边距属性设置的简写。四个外边距属性设置分别是: margin-topmargin-rightmargin-bottommargin-left 。指定的外边距允许为负数。

margin的top和bottom属性对非替换内联元素无效,例如<span><code>

语法

形式语法: [ <length> | <percentage> | auto ]{1,4}
margin: style                  /*单值语法  所有边缘 */  举例: margin: 1em; 
margin: vertical horizontal    /*二值语法  纵向 横向 */  举例: margin: 5% auto; 
margin: top horizontal bottom  /*三值语法 上 横向 下*/  举例: margin: 1em auto 2em; 
margin: top right bottom left  /*四值语法 上 右 下 左*/  举例: margin: 2px 1em 0 auto; 

margin: inherit

取值

接受1~4个可选参数,每个参数取值如下:

<length>
指定一个固定的宽度。可以为负数。请参阅 <length> 获知可用的计数单位。
<percentage>
 <percentage> 相对于包含该元素的块的宽度(相对于该块的百分比)。该值可以为负数。
auto
浏览器会自动选择一个合适的margin来应用。它可以用于将一个块居中。
比如,div { width:50%;  margin:0 auto; } 会把这个div容器水平居中。
  • 只有一个  值时,这个值会被指定给全部的 四个边.
  • 两个 值时,第一个值被匹配给 上和下, 第二个值被匹配给 左和右.
  • 三个 值时,第一个值被匹配给 , 第二个值被匹配给 左和右, 第三个值被匹配给 下.
  • 四个 值时,会依次按 上、右、下、左 的顺序匹配 (即顺时针顺序).

范例

一个简单的例子

HTML

<div class="ex1">
  margin:     auto;
  background: gold;
  width:      66%;
</div>
<div class="ex2">
  margin:     20px 0 0 -20px;
  background: gold;
  width:      66%;
</div>

CSS

.ex1 {
  margin: auto;
  background: gold;
  width: 66%;
}
.ex2 {
  margin: 20px 0px 0 -20px;
  background: gold;
  width: 66%;
}

其他的例子

margin: 5%;                /* 所有的边都是 5% 的边距 */

margin: 10px;              /* 所有的边都是 10像素 的边距 */

margin: 1.6em 20px;        /* 上和下边是 1.6字距, 左和右是 20像素 边距 */

margin: 10px 3% 1em;       /* 上边 10像素, 左和右 3%, 下边 1字距 边距 */

margin: 10px 3px 30px 5px; /* 上边 10像素, 右边 3像素, bottom 30px, left 5px margin */

margin: 1em auto;          /* 上和下边 1字距 边距, 该盒子是水平居中的 */

margin: auto;              /* 该盒子是水平居中的, 上下边距为0 */

使用 margin: 0 auto 水平居中;

在现代浏览器中,如果要把一些东西水平居中,使用 display:flex; justify-content: center; .

然而, 在一些老的浏览器,如IE8-9, 这些是不可用的. 想要把一个元素在其父元素中居中, 使用 margin: 0 auto;

边距折叠

元素的上边距和下边距有时会发生折叠现象(与相邻的margin折叠,折叠后的值为折叠前两个值中较大的那一个), 查看 Mastering margin collapsing 获取更多信息.

标准化说明

Specification Status Comment
CSS Basic Box Model
margin
Working Draft No significant change.
CSS Transitions
margin
Working Draft Defines margin as animatable.
CSS Level 2 (Revision 1)
margin
Recommendation Removes its effect on inline elements.
CSS Level 1
margin
Recommendation Initial definition.

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 1.0 (1.7 or earlier) 3.0 3.5 1.0 (85)
auto value 1.0 1.0 (1.7 or earlier) 6.0 (strict mode) 3.5 1.0 (85)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 1.0 1.0 (1) 6.0 6.0 1.0

请参阅

文档标签和贡献者

最后编辑者: tanshaobo,