Area on which CSS margin-left applymargin-left  属性 设置与元素相关联的盒子模型的左外边距。这个值可以为负值。

竖直排列相邻的两个盒子模型的外边距会重叠 margin collapsing

在长度(width)被约束这种极少情况下,( 即当所有的宽度,左边界,边界,填充内容区域和边缘都被定义), 左边界会被忽略,如果被制定为auto值,会有相同的计算值。

适用元素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
计算值the percentage as specified or the absolute length
Animation typea length
正规顺序the unique non-ambiguous order defined by the formal grammar


/* <length> values */
margin-left: 10px;  /* 绝对长度 */
margin-left: 1em;   /* 相对于字号的长度 */
margin-left: 5%;    /* 相对最近块元素的宽度 */

/* Keyword values */
margin-left: auto;

/* Global values */
margin-left: inherit;
margin-left: initial;
margin-left: unset;


一个固定宽度 <length> 值 : 可以是一个绝对宽度, e.g. in px, 也可以是个相对宽度, e.g. in em, 或者相对视窗的大小, e.g. in vh.
百分比值 <percentage> 最近的块容器的宽度 width .
auto关键词表示在当前布局模式下,浏览器根据接收的左边距自动计算出外边距。如果有几组margin-left和margin-right 设置为auto,那么最后计算的空间分布,会根据display,float,position属性,自动生成以下几种情况:
Value of display Value of float Value of position Computed value of auto Comment
inline, inline-block, inline-table any static or relative 0 Inline layout mode
block, inline, inline-block, block, table, inline-table, list-item, table-caption any static or relative 0, 除非margin-left和   margin-right同时都设置为auto. 这样的话,元素就被设置为基于父元素居中。 Block layout mode
block, inline, inline-block, block, table, inline-table, list-item, table-caption left or right static or relative 0 Block layout mode (floating element)
any table-*, except table-caption any any 0 Internal table-* elements don't have margins, use border-spacing instead
any, except flex, inline-flex, or table-* any fixed or absolute 0, except if both margin-left and margin-right are set to auto. In this case, it is set to the value centering the border area inside the available width, if fixed. Absolutely positioned layout mode
flex, inline-flex any any 0, except if there is any positive horizontal free space. In this case, it is evenly distributed to all horizontal auto margins. Flexbox layout mode

Formal syntax

<length> | <percentage> | auto


.content { margin-left:   5%; }
.sidebox { margin-left: 10px; }
.logo    { margin-left: -5px; }


Specification Status Comment
CSS Basic Box Model
Working Draft No significant change from CSS 2.1.
CSS Transitions
Working Draft Defines margin-left as animatable.
CSS Flexible Box Layout Module
Candidate Recommendation Defines the behavior of margin-left on flex items.
CSS Level 2 (Revision 1)
Recommendation Like in CSS1, but removes its effect on inline elements.
CSS Level 1
Recommendation Initial definition

Browser compatibility

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


 此页面的贡献者: JustACodeGirl, daisyHawen, MidLinn
 最后编辑者: JustACodeGirl,