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

尝试一下

margin-left: 1em;

margin-left: 10%;

margin-left: 10px;

margin-left: 0;

<section>  <div>    <div></div>    <div></div>    <div></div>  </div></section>

#container {  width: 300px;  height: 200px;  display: flex;  align-content: flex-start;  justify-content: flex-start;}.col {  width: 33.33%;  border: solid #5b6dcd 10px;  background-color: rgba(229, 232, 252, 0.6);  flex-shrink: 0;}#example-element {  border: solid 10px #ffc129;  background-color: rgba(255, 244, 219, 0.6);}

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

在宽度过度约束的极少数情况下（即，当width、margin-left、border、padding、内容区域和margin-right 都已被定义），margin-left 会被忽略，如果被指定为auto 值，则会有相同的计算值。

语法

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

<anchor-name> =
<dashed-ident>

<anchor-size> =
width|
height|
block|
inline|
self-block|
self-inline

示例

使用百分比值设置 margin-left

margin-left 的百分比值代表相对于容器的行级尺寸尺寸。

HTML

<p>  靠近花园的入口处有一株大玫瑰树，树上的花是白色的，三个园丁正忙着把花儿染红。</p><p>  爱丽丝觉得很奇怪，就想走过去仔细观察。她刚要走到他们面前，就听到其中一个人说：“小心点，老五！别把颜料溅到我身上。”</p><p>“我也没办法，”老五生气地说，“是老七碰了我的胳膊。”</p>

CSS

.example {  margin-left: 50%;}

结果

规范

浏览器兼容性

参见

• margin-top、margin-right 和margin-bottom，以及margin 简写
• 映射的逻辑属性：margin-block-start、margin-block-end、margin-inline-start 和margin-inline-end，以及margin-block 和margin-inline 简写