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.

margin-left CSS 属性设置元素左侧的外边距区域。正值使其远离相邻元素,负值使其更加靠近。

尝试一下

两个相邻的盒子的垂直边距可能会合并。这被称为外边距折叠

在宽度过度约束的极少数情况下(即,当 widthmargin-leftborderpadding、内容区域和 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-leftmargin-right 的值都是 auto,则最后计算的空间是均匀分布的。下表总结了不同的情况:

display 的值 float 的值 position 的值 auto 的计算值 注释
inlineinline-blockinline-table 任意 staticrelative 0 行级布局模式
blockinlineinline-blockblocktableinline-tablelist-itemtable-caption 任意 staticrelative 0,除非将 margin-leftmargin-right 都设置为 auto。在这种情况下,它被设置为将元素置于其父级元素中心的值。 块级布局模式
blockinlineinline-blockblocktableinline-tablelist-itemtable-caption leftright staticrelative 0 块级布局模式(浮动元素)
table-* 中的任意一个,除了 table-caption 任意 任意 0 内部的 table-* 元素没有外边距,请使用 border-spacing 代替。
任意,除了 flexinline-flex table-* 任意 fixedabsolute 0,除非将 margin-leftmargin-right 都设置为 auto。在这种情况下,如果 width 固定,它会被设置为将边框区域在可用宽度内居中的值。 绝对定位布局模式
flexinline-flex 任意 任意 0,除非存在任何正水平可用空间。在这种情况下,它会均匀分配到所有水平的 auto 外边距中。 弹性盒布局模式

形式定义

初始值0
适用元素all elements, except elements with table display types other than table-caption, table and inline-table. It also applies to ::first-letter.
是否是继承属性
Percentagesrefer to the width of the containing block
计算值the percentage as specified or the absolute length
动画类型a length

形式语法

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

参见