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.

* Some parts of this feature may have varying levels of support.

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-name> || <anchor-size> ]? , <length-percentage>? )

<anchor-name> =
<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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
margin-left
anchor-size()
Experimental
auto

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

参见