margin-left

The margin-left CSS property sets the margin area on the left side of an element. A positive value will place it farther than normal from its neighbors, while a negative value will place it closer.

/* <length> values */
margin-left: 10px;  /* An absolute length */
margin-left: 1em;   /* relative to the text size */
margin-left: 5%;    /* relative to the nearest block container's width */
/* Keyword values */
margin-left: auto;
/* Global values */
margin-left: inherit;
margin-left: initial;
margin-left: unset;

Area on which CSS margin-left apply

The vertical margins of two adjacent boxes may fuse. This is called margin collapsing.

In the rare cases where width is overconstrained (i.e., when all of width, margin-left, border, padding, the content area, and margin-right are defined), margin-left is ignored, and will have the same calculated value as if the auto value was specified.

Initial value	`0`
Applies to	all elements, except elements with table `display` types other than `table-caption`, `table` and `inline-table`. It also applies to `::first-letter`.
Inherited	no
Percentages	refer to the width of the containing block
Media	visual
Computed value	the percentage as specified or the absolute length
Animation type	a length
Canonical order	the unique non-ambiguous order defined by the formal grammar

Syntax

The margin-left property is specified as the keyword auto, or a <length>, or a <percentage>. Its value can be positive, zero, or negative.

Values

<length>

The size of the margin as a fixed value.

<percentage>

The size of the margin as a percentage, relative to the width of the containing block.

auto

The left margin receives a share of the unused horizontal space, as determined mainly by the layout mode that is used. If the values of margin-left and margin-right are both auto, the calculated space is evenly distributed. This table summarizes the different cases:

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`, except if both `margin-left` and `margin-right` are set to `auto`. In this case, it is set to the value centering the element inside its parent.	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

Examples

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

Specifications

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

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	1.0	(Yes)	1.0 (1.7 or earlier)	3.0	3.5	1.0 (85)
`auto` value	1.0	(Yes)	1.0 (1.7 or earlier)	6.0 (strict mode)	3.5	1.0 (85)

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	1.0	(Yes)	1.0 (1)	6.0	6.0	1.0