外边距

示例

基本示例

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