margin

示例(Examples)

¥Examples

基本示例(Basic example)

¥Basic example

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

¥Use m-<number> utilities like m-4 and m-8 to control the margin on all sides of an element:

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

在单侧添加边距(Adding margin to a single side)

¥Adding margin to a single side

使用 mt-<number>、mr-<number>、mb-<number> 和 ml-<number> 工具（如 ml-2 和 mt-6）控制元素一侧的边距：

¥Use mt-<number>, mr-<number>, mb-<number>, and ml-<number> utilities like ml-2 and mt-6 to control the margin on one side of an element:

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

¥Adding horizontal margin

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

¥Use mx-<number> utilities like mx-4 and mx-8 to control the horizontal margin of an element:

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

添加垂直边距(Adding vertical margin)

¥Adding vertical margin

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

¥Use my-<number> utilities like my-4 and my-8 to control the vertical margin of an element:

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

使用负值(Using negative values)

¥Using negative values

要使用负边距值，请在类名前加上破折号以将其转换为负值：

¥To use a negative margin value, prefix the class name with a dash to convert it to a negative value:

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

¥Using logical properties

使用 ms-<number> 或 me-<number> 工具（如 ms-4 和 me-8）设置 margin-inline-start 和 margin-inline-end 逻辑属性：

¥Use ms-<number> or me-<number> utilities like ms-4 and me-8 to set the margin-inline-start and margin-inline-end logical properties:

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

¥Adding space between children

使用 space-x-<number> 或 space-y-<number> 工具（如 space-x-4 和 space-y-8）控制元素之间的空间：

¥Use space-x-<number> or space-y-<number> utilities like space-x-4 and space-y-8 to control the space between elements:

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

反转子顺序(Reversing children order)

¥Reversing children order

如果你的元素是反向顺序（使用 flex-row-reverse 或 flex-col-reverse），请使用 space-x-reverse 或 space-y-reverse 工具确保将空间添加到每个元素的正确一侧：

¥If your elements are in reverse order (using say flex-row-reverse or flex-col-reverse), use the space-x-reverse or space-y-reverse utilities to ensure the space is added to the correct side of each element:

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

限制(Limitations)

¥Limitations

空间工具实际上只是为组中除最后一项之外的所有项目添加边距的快捷方式，并非设计用于处理复杂情况，如网格、换行布局或子代以复杂的自定义顺序而不是其自然 DOM 顺序渲染的情况。

¥The space utilities are really just a shortcut for adding margin to all-but-the-last-item in a group, and aren't designed to handle complex cases like grids, layouts that wrap, or situations where the children are rendered in a complex custom order rather than their natural DOM order.

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

¥For those situations, it's better to use the gap utilities when possible, or add margin to every element with a matching negative margin on the parent.

此外，空间工具并非设计为与 划分实用工具 一起使用。对于这些情况，请考虑向子项添加边距/填充工具。

¥Additionally, the space utilities are not designed to work together with the divide utilities. For those situations, consider adding margin/padding utilities to the children instead.

使用自定义值(Using a custom value)

¥Using a custom value

使用工具例如 m-[<value>],mx-[<value>], and 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)

¥Responsive design

在 margin 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：

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

请参阅 变体文档 详细了解如何使用变体。

自定义主题(Customizing your theme)

¥Customizing your theme

该 m-<number>,mx-<number>,my-<number>,ms-<number>,me-<number>,mt-<number>,mr-<number>,mb-<number>, and ml-<number> 工具由 --spacing 主题变量驱动，可以在你自己的主题中进行自定义：

@theme {
  --spacing: 1px; 
}

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