Our volunteers haven't translated this article into فارسی yet. Join us and help get the job done!
Summary
The margin-left
CSS property sets the margin space required on the left side of a box associated with an element. A negative value is also allowed.
The vertical margins of two adjacent boxes may fuse. This is called margin collapsing.
In the rare cases where width is overconstrained (that is 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 |
Animatable | yes, as a length |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
/* <length> values */ margin-left: 10px; /* An absolute length */ margin-left: 1em; /* A length relative to the text size */ margin-left: 5%; /* A margin relative to the nearest block container's width */ /* Keyword values */ margin-left: auto; /* Global values */ margin-left: inherit; margin-left: initial; margin-left: unset;
Values
<length>
- Is a
<length>
specifying a fixed width: it can be absolute width, e.g. inpx
, or a width relative to the text size, e.g. inem
, or relative to the viewport size, e.g. invh
. <percentage>
- Is a
<percentage>
relative to the width of the nearest containing block. auto
- Is a keyword indicating that the left margin receives a share of the remaining space, defined mainly by the current layout mode.. If there several
auto
values formargin-left
ormargin-right
, the calculated space is evenly distributed between all theauto
values. 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 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 |
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 |
Document Tags and Contributors
Tags:
Contributors to this page:
Simplexible,
Lemondoge,
Prinz_Rana,
Sebastianz,
fscholz,
jsx,
trevorh,
kscarfone,
Sheppy,
teoli,
ethertank,
McGurk,
grendel,
Yuichiro,
BijuGC
Last updated by:
Simplexible,