margin-left

试一试

margin-left: 1em;

margin-left: 10%;

margin-left: 10px;

margin-left: 0;

<section id="default-example">
  <div id="container">
    <div class="col"></div>
    <div class="col transition-all" id="example-element"></div>
    <div class="col"></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: rgb(229 232 252 / 0.6);
  flex-shrink: 0;
}

#example-element {
  border: solid 10px #ffc129;
  background-color: rgb(255 244 219 / 0.6);
}

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

在极少数情况下，如果宽度被过度约束（即同时定义了 width、margin-left、border、padding、内容区域和 margin-right），margin-left 将被忽略，并且其计算值将与指定 auto 值时相同。

语法

/* <length> values */
margin-left: 10px; /* An absolute length */
margin-left: 1em; /* relative to the text size */
margin-left: 5%; /* relative to the nearest block container's width */
margin-left: anchor-size(self-inline);
margin-left: calc(anchor-size(--my-anchor width, 20px) / 4);

/* Keyword values */
margin-left: auto;

/* Global values */
margin-left: inherit;
margin-left: initial;
margin-left: revert;
margin-left: revert-layer;
margin-left: unset;

margin-left 属性被指定为关键字 auto，或一个 <length>，或一个 <percentage>。它的值可以是正数、零或负数。

值

<length>

边距的大小为固定值。

• 对于锚点定位元素，anchor-size() 函数会解析为一个相对于相关锚点元素宽度或高度的 <length> 值（参见根据锚点大小设置元素边距）。

<percentage>

边距的大小为百分比，相对于包含块的内联尺寸（在水平书写模式下是宽度，由writing-mode定义）。

auto

左外边距会获得一部分未使用的水平空间，这主要由所使用的布局模式决定。如果 margin-left 和 margin-right 的值都为 auto，则计算出的空间将均匀分布。下表总结了不同的情况：

display 的值	float 的值	position 的值	auto 的计算值	Comment
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 外边距。	Flexbox 布局模式

正式定义

正式语法

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>
  A large rose-tree stood near the entrance of the garden: the roses growing on
  it were white, but there were three gardeners at it, busily painting them red.
</p>
<p class="example">
  Alice thought this a very curious thing, and she went nearer to watch them,
  and just as she came up to them she heard one of them say, "Look out now,
  Five! Don't go splashing paint over me like that!"
</p>
<p>
  "I couldn't help it," said Five, in a sulky tone; "Seven jogged my elbow."
</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 简写属性
• CSS 盒模型模块