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.
尝试一下
两个相邻的盒子的垂直边距可能会合并。这被称为外边距折叠。
在宽度过度约束的极少数情况下(即,当 width
、margin-left
、border
、padding
、内容区域和 margin-right
都已被定义),margin-left
会被忽略,如果被指定为 auto
值,则会有相同的计算值。
语法
css
/* <length> 值 */
margin-left: 10px; /* 绝对长度 */
margin-left: 1em; /* 相对于文本大小 */
margin-left: 5%; /* 相对于最近的块级容器的宽度 */
/* 关键字值 */
margin-left: auto;
/* 全局值 */
margin-left: inherit;
margin-left: initial;
margin-left: revert;
margin-left: revert-layer;
margin-left: unset;
margin-left
属性可以被指定为关键字 auto
、<length>
或 <percentage>
。它的值可以是正值、零或负值。
值
<length>
-
外边距的大小为固定值。
<percentage>
-
外边距的大小为相对于包含块的行级尺寸(由
writing-mode
定义的水平文字的宽度)的百分比。 auto
-
左边距接收未使用的水平空间中的一部分(这主要由所使用的布局模式确定)。如果
margin-left
和margin-right
的值都是auto
,则最后计算的空间是均匀分布的。下表总结了不同的情况:display
的值float
的值position
的值auto
的计算值注释 inline
、inline-block
、inline-table
任意 static
或relative
0
行级布局模式 block
、inline
、inline-block
、block
、table
、inline-table
、list-item
、table-caption
任意 static
或relative
0
,除非将margin-left
和margin-right
都设置为auto
。在这种情况下,它被设置为将元素置于其父级元素中心的值。块级布局模式 block
、inline
、inline-block
、block
、table
、inline-table
、list-item
、table-caption
left
或right
static
或relative
0
块级布局模式(浮动元素) table-*
中的任意一个,除了table-caption
任意 任意 0
内部的 table-*
元素没有外边距,请使用border-spacing
代替。任意,除了 flex
、inline-flex
或table-*
任意 fixed
或absolute
0
,除非将margin-left
和margin-right
都设置为auto
。在这种情况下,如果width
固定,它会被设置为将边框区域在可用宽度内居中的值。绝对定位布局模式 flex
、inline-flex
任意 任意 0
,除非存在任何正水平可用空间。在这种情况下,它会均匀分配到所有水平的auto
外边距中。弹性盒布局模式
形式定义
形式语法
margin-left =
<length-percentage> |
auto |
<anchor-size()>
<length-percentage> =
<length> |
<percentage>
<anchor-size()> =
anchor-size( [ <anchor-element> || <anchor-size> ]? , <length-percentage>? )
<anchor-element> =
<dashed-ident>
<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
示例
使用百分比值设置 margin-left
margin-left
的百分比值代表相对于容器的行级尺寸尺寸。
HTML
html
<p>
靠近花园的入口处有一株大玫瑰树,树上的花是白色的,三个园丁正忙着把花儿染红。
</p>
<p class="example">
爱丽丝觉得很奇怪,就想走过去仔细观察。她刚要走到他们面前,就听到其中一个人说:“小心点,老五!别把颜料溅到我身上。”
</p>
<p>“我也没办法,”老五生气地说,“是老七碰了我的胳膊。”</p>
CSS
css
.example {
margin-left: 50%;
}
结果
规范
Specification |
---|
CSS Box Model Module Level 3 # margin-physical |
浏览器兼容性
BCD tables only load in the browser
参见
margin-top
、margin-right
和margin-bottom
,以及margin
简写- 映射的逻辑属性:
margin-block-start
、margin-block-end
、margin-inline-start
和margin-inline-end
,以及margin-block
和margin-inline
简写