margin

示例

基本示例

使用 m-<number> 实用工具，例如 m-4 和 m-8 来控制元素所有侧面的 margin

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

向单侧添加 margin

使用 mt-<number>、mr-<number>、mb-<number> 和 ml-<number> 实用工具，例如 ml-2 和 mt-6 来控制元素一侧的 margin

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

添加水平 margin

使用 mx-<number> 实用工具，例如 mx-4 和 mx-8 来控制元素的水平 margin

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

添加垂直 margin

使用 my-<number> 实用工具，例如 my-4 和 my-8 来控制元素的垂直 margin

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

使用负值

要使用负 margin 值，请在类名前面加上一个短划线，将其转换为负值

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

使用逻辑属性

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

在子元素之间添加间距

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

反转子元素顺序

如果你的元素是反向顺序（例如使用 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 实用工具实际上只是向组中除最后一个项目之外的所有项目添加 margin 的快捷方式，并非旨在处理复杂的情况，例如网格、换行的布局或子元素以复杂的自定义顺序而不是其自然 DOM 顺序呈现的情况。

对于这些情况，最好在可能的情况下使用 gap 实用工具，或者向每个元素添加 margin，并在父元素上添加匹配的负 margin。

此外，space 实用工具并非旨在与 divide 实用工具 一起使用。对于这些情况，请考虑改为向子元素添加 margin/padding 实用工具。

使用自定义值

使用如下实用工具 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() 函数。

响应式设计

前缀a 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>、 m-<number>、mx-<number>、my-<number>、ms-<number>、me-<number>、mt-<number>、mr-<number>、mb-<number>、和 ml-<number>实用工具由 --spacing 主题变量驱动，可以在你自己的主题中自定义

@theme {
  --spacing: 1px; 
}

在 主题变量文档 中了解有关自定义间距比例的更多信息。