w3study.net

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

{{InteractiveExample("CSS Demo: margin-left")}}

```css interactive-example-choice margin-left: 1em;

```css interactive-example-choice
margin-left: 10%;

```css interactive-example-choice margin-left: 10px;

```css interactive-example-choice
margin-left: 0;

```html interactive-example

```css interactive-example
#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>。它的值可以是正值、零或负值。

值

• {{cssxref("<length>")}}
  • : 外边距的大小为固定值。
• {{cssxref("<percentage>")}}
  • : 外边距的大小为相对于包含块的行级尺寸（由 {{cssxref("writing-mode")}} 定义的水平文字的宽度）的百分比。

• auto

  • : 左边距接收未使用的水平空间中的一部分（这主要由所使用的布局模式确定）。如果 margin-left 和 margin-right 的值都是 auto，则最后计算的空间是均匀分布的。下表总结了不同的情况：

  {{cssxref("display")}} 的值	{{cssxref("float")}} 的值	{{cssxref("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-* 元素没有外边距，请使用 {{ cssxref("border-spacing") }} 代替。
  任意，除了 flex、inline-flex 或 table-*	任意	fixed 或 absolute	0，除非将 margin-left 和 margin-right 都设置为 auto。在这种情况下，如果 width 固定，它会被设置为将边框区域在可用宽度内居中的值。	绝对定位布局模式
  flex、inline-flex	任意	任意	0，除非存在任何正水平可用空间。在这种情况下，它会均匀分配到所有水平的 auto 外边距中。	弹性盒布局模式

形式定义

{{cssinfo}}

形式语法

{{csssyntax}}

示例

使用百分比值设置 margin-left

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

HTML

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

CSS

.example {
  margin-left: 50%;
}

结果

{{EmbedLiveSample("使用百分比值设置 margin-left", "", "250")}}