margin-left
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.
试一下
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.
语法
/* <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.
值
<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 casesValue 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
正式定义
正式语法
margin-left =
<length-percentage> |
auto
<length-percentage> =
<length> |
<percentage>
示例
将 margin-left 设置为百分比
margin-left
的百分比值相对于容器的内联大小。
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%;
}
结果
规范
规范 |
---|
CSS 盒模型模块级别 3 # margin-physical |
浏览器兼容性
BCD 表格仅在浏览器中加载
另请参阅
margin-top
、margin-right
和margin-bottom
以及margin
简写- 映射的逻辑属性:
margin-block-start
、margin-block-end
、margin-inline-start
和margin-inline-end
以及简写margin-block
和margin-inline