margin (外邊距)

範例

基本範例

使用像是 m-4 和 m-8 的 m-<number> 類別來控制元素四邊的外距。

<div class="m-8 ...">m-8</div>

為單邊增加外距

使用像是 mt-6, mr-4, mb-8 和 ml-2 的 mt-<number>, mr-<number>, mb-<number> 和 ml-<number> 類別來控制元素的單邊外距。

<div class="mt-6 ...">mt-6</div><div class="mr-4 ...">mr-4</div><div class="mb-8 ...">mb-8</div><div class="ml-2 ...">ml-2</div>

增加水平外距

使用像是 mx-4 和 mx-8 的 mx-<number> 類別來控制元素的水平外距。

<div class="mx-8 ...">mx-8</div>

增加垂直外距

使用像是 my-4 和 my-8 的 my-<number> 類別來控制元素的垂直外距。

<div class="my-8 ...">my-8</div>

使用負值

若要使用負值的外距，在類別名稱前加上一個破折號來轉換為負值。

<div class="h-16 w-36 bg-sky-400 opacity-20 ..."></div><div class="-mt-8 bg-sky-300 ...">-mt-8</div>

使用邏輯屬性

使用像是 ms-4 和 me-8 的 ms-<number> 和 me-<number> 類別來設定 margin-inline-start 和 margin-inline-end 邏輯屬性。

<div>  <div dir="ltr">    <div class="ms-8 ...">ms-8</div>    <div class="me-8 ...">me-8</div>  </div>  <div dir="rtl">    <div class="ms-8 ...">ms-8</div>    <div class="me-8 ...">me-8</div>  </div></div>

在子元素之間增加間距

使用像是 space-x-4 和 space-y-8 的 space-x-<number> 和 space-y-<number> 類別來控制元素之間的間距。

<div class="flex space-x-4 ...">  <div>01</div>  <div>02</div>  <div>03</div></div>

反轉子元素的順序

如果您的元素順序是反向的 (例如使用 flex-row-reverse 或 flex-col-reverse)，請使用 space-x-reverse 或 space-y-reverse 類別來確保間距被增加到每個元素的正確邊。

<div class="flex flex-row-reverse space-x-4 space-x-reverse ...">  <div>01</div>  <div>02</div>  <div>03</div></div>

限制

space 類別實際上只是在群組中除了最後一個項目之外的所有項目增加外距的快捷方式，並且不適用於處理複雜的案例，例如網格、會換行的版面配置，或者子元素以複雜的自訂順序而不是其自然的 DOM 順序呈現的情況。

對於這些情況，最好盡可能使用 gap 類別，或者是在每個元素上增加外距，並在父元素上使用相對應的負外距。

此外，space 類別不適用於與 divide 類別一起使用。 對於這些情況，請考慮改為將外距/內距類別添加到子元素。

使用自訂值

使用像是 m-[<value>],mx-[<value>],和 mb-[<value>]來設定margin (外邊距)基於完全自訂的值

<div class="m-[5px] ...">  <!-- ... --></div>

對於 CSS 變數，您也可以使用 m-(<custom-property>) 語法

<div class="m-(--my-margin) ...">  <!-- ... --></div>

這只是一個簡寫 m-[var(<custom-property>)] 會自動為您添加 var() 函式。

響應式設計

前綴一個 margin 類別 加上一個斷點變體，例如 md: 僅在中型 螢幕尺寸及以上應用該類別。

<div class="mt-4 md:mt-8 ...">  <!-- ... --></div>

在 變體說明文件中瞭解更多關於使用變體的資訊。

自訂您的主題

這個 m-<number>、mx-<number>、my-<number>、ms-<number>、me-<number>、mt-<number>、mr-<number>、mb-<number> 和ml-<number> 這些工具類別是由 --spacing 主題變數驅動，您可以在自己的主題中自訂此變數。這些工具類別是由 --spacing 主題變數驅動，您可以在自己的主題中自訂此變數。

@theme {  --spacing: 1px; }

深入了解如何在主題變數文件中自訂間距比例。