外边距

示例

基本示例

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

限制

空间工具实际上只是为一组中的倒数第二个元素添加外边距的快捷方式，并且不设计用于处理复杂情况，例如网格、换行的布局，或在复杂订单中渲染的子元素，而不是它们的自然 DOM 顺序。

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

此外，空间工具不设计用于与 divide 工具 一起使用。在这些情况下，考虑在子元素上添加外边距/内边距工具。

使用自定义值

Use utilities like m-[<value>],mx-[<value>], and mb-[<value>] to set the 外边距 based on a completely custom value:

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

For CSS variables, you can also use the m-(<custom-property>) syntax:

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

This is just a shorthand for m-[var(<custom-property>)] that adds the var() function for you automatically.

响应设计

Prefix a 外边距 utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

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

Learn more about using variants in the variants documentation.

自定义你的主题

The m-<number>,mx-<number>,my-<number>,ms-<number>,me-<number>,mt-<number>,mr-<number>,mb-<number>, and ml-<number> utilities are driven by the --spacing theme variable, which can be customized in your own theme:

@theme {
  --spacing: 1px; 
}

Learn more about customizing the spacing scale in the theme variable documentation.