概述

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

初始值as each of the properties of the shorthand:
适用元素all elements, except elements with table display types other than table-caption, table and inline-table. It also applies to ::first-letter.
是否是继承属性
Percentagesrefer to the width of the containing block
适用媒体visual
计算值as each of the properties of the shorthand:
  • margin-bottom: the percentage as specified or the absolute length
  • margin-left: the percentage as specified or the absolute length
  • margin-right: the percentage as specified or the absolute length
  • margin-top: the percentage as specified or the absolute length
Animation typea length
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

形式语法: [ <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
auto会被替代为适当的值。它可以用于将一个块居中。
比如,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;

标准化说明

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.

浏览器兼容性

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

请参阅

文档标签和贡献者

 最后编辑者: LuSitong,