margin-left

Summary

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

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

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

初始值0
适用元素all elements, except elements with table display types other than table-caption, table and inline-table. It also applies to ::first-letter and ::first-line.
是否是继承属性
Percentagesrefer to the width of the containing block
计算值the percentage as specified or the absolute length
Animation typea length

Syntax

/* <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;

Values

<length>
一个固定宽度 <length> 值 : 可以是一个绝对宽度, e.g. in px, 也可以是个相对宽度, e.g. in em, 或者相对视窗的大小, e.g. in vh.
<percentage>
百分比值 <percentage> 最近的块容器的宽度 width .
auto
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

在水平方向上有空余空间的情况下,空余的空间会被平均分给水平方向上写有margin-left:auto属性的元素的外边距

Flexbox layout mode

Formal syntax

Examples

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

Specifications

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

Browser compatibility

BCD tables only load in the browser