margin-left
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The margin-left
CSS property sets the margin area on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
Try it
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.
Syntax
/* <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: revert;
margin-left: revert-layer;
margin-left: unset;
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 inline size (width in a horizontal language, defined by
writing-mode
) 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
andmargin-right
are bothauto
, 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
orrelative
0
Inline layout mode block
,inline
,inline-block
,block
,table
,inline-table
,list-item
,table-caption
any static
orrelative
0
, except if bothmargin-left
andmargin-right
are set toauto
. 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
orright
static
orrelative
0
Block layout mode (floating element) any table-*
, excepttable-caption
any any 0
Internal table-*
elements don't have margins, useborder-spacing
insteadany, except flex
,inline-flex
, ortable-*
any fixed
orabsolute
0
, except if bothmargin-left
andmargin-right
are set toauto
. In this case, it is set to the value centering the border area inside the availablewidth
, 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 horizontalauto
margins.Flexbox layout mode
Formal definition
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 |
Computed value | the percentage as specified or the absolute length |
Animation type | a length |
Formal syntax
margin-left =
<length-percentage> |
auto |
<anchor-size()>
<length-percentage> =
<length> |
<percentage>
<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )
<anchor-name> =
<dashed-ident>
<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
Examples
Setting margin-left as a percentage
Percentage values for margin-left
are relative to the container's inline size.
HTML
<p>
A large rose-tree stood near the entrance of the garden: the roses growing on
it were white, but there were three gardeners at it, busily painting them red.
</p>
<p class="example">
Alice thought this a very curious thing, and she went nearer to watch them,
and just as she came up to them she heard one of them say, "Look out now,
Five! Don't go splashing paint over me like that!"
</p>
<p>
"I couldn't help it," said Five, in a sulky tone; "Seven jogged my elbow."
</p>
CSS
.example {
margin-left: 50%;
}
Result
Specifications
Specification |
---|
CSS Box Model Module Level 3 # margin-physical |
Browser compatibility
BCD tables only load in the browser
See also
margin-top
,margin-right
, andmargin-bottom
margin
shorthandmargin-block-start
,margin-block-end
,margin-inline-start
, andmargin-inline-end
margin-block
andmargin-inline
shorthands- CSS box model module