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 盒模型模組