margin

範例（Examples）

基本範例（Basic example）

使用 m-<number> 通用類別（如 m-4 和 m-8）來控制元素所有側邊的外距：

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

新增單側外距（Adding margin to a single side）

使用 mt-<number>、mr-<number>、mb-<number> 和 ml-<number> 通用類別（如 ml-2 和 mt-6）來控制元素單側的外距：

<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>

新增水平外距（Adding horizontal margin）

使用 mx-<number> 通用類別（如 mx-4 和 mx-8）來控制元素的水平外距：

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

新增垂直外距（Adding vertical margin）

使用 my-<number> 通用類別（如 my-4 和 my-8）來控制元素的垂直外距：

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

使用負值（Using negative values）

若要使用負外距值，請在類別名稱前加上破折號將其轉換為負值：

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

使用邏輯屬性（Using logical properties）

使用 ms-<number> 或 me-<number> 通用類別（如 ms-4 和 me-8）來設定 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>

新增子元素之間的間距（Adding space between children）

使用 space-x-<number> 或 space-y-<number> 通用類別（如 space-x-4 和 space-y-8）來控制元素之間的間距：

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

反轉子元素順序（Reversing children order）

如果您的元素順序是反轉的（例如使用 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>

限制（Limitations）

space 通用類別實際上只是為群組中除最後一個項目外的所有項目新增外距的捷徑，並不是設計用來處理複雜情況的，例如 grid、會換行的佈局，或子元素以複雜的自訂順序渲染而非其自然 DOM 順序的情況。

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

此外，space 通用類別並非設計為與 divide 通用類別一起使用。對於這些情況，請考慮改為在子元素上新增 margin/padding 通用類別。

使用自訂值（Using a custom value）

使用 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() 函式。

響應式設計（Responsive design）

在 margin 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：

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

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

自訂主題（Customizing your theme）

m-<number>、mx-<number>、my-<number>、ms-<number>、me-<number>、mt-<number>、mr-<number>、mb-<number>、 和 ml-<number> 通用類別由 --spacing 主題變數驅動，可以在你自己的主題中自訂：

@theme {  --spacing: 1px; }

在主題變數文件中了解更多關於自訂間距比例的資訊。