margin

快速参考

示例

基本示例

使用 m-<number> 实用工具（如 m-4 和 m-8）来控制元素所有边的外边距：

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

添加单边外边距

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

添加水平外边距

使用 mx-<number> 实用工具（如 mx-4 和 mx-8）来控制元素的水平外边距：

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

添加垂直外边距

使用 my-<number> 实用工具（如 my-4 和 my-8）来控制元素的垂直外边距：

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

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

此外，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() 函数。

响应式设计

使用断点变体（例如 md:）作为 margin 实用工具的前缀，以便仅在中等尺寸及以上的屏幕上应用该实用工具：

<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 主题变量驱动，该变量可以在您自己的主题中进行自定义：

@theme {
  --spacing: 1px;
}