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>

限制

间距工具类实际上只是一个为组中除最后一个项目外的所有项目添加外边距的快捷方式,它们并不适用于处理复杂的情况,比如网格、换行布局,或者元素是按照复杂的自定义顺序而不是其自然DOM顺序渲染的情况。

对于这些情况,最好在可能的情况下使用 gap 工具类,或者为每个元素添加外边距,同时为父元素添加相应的负外边距。

此外,间距工具类不适合与 divide 工具类一起使用。对于这些情况,考虑为子元素添加外边距/内边距工具类。

使用自定义值

Use utilities like m-[<value>],mx-[<value>], and mb-[<value>] to set the margin 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.