1. 间距
  2. 边距

间距

边距

用于控制元素边距的实用工具。

样式
m-<数字>
margin: calc(var(--spacing) * <数字>);
-m-<数字>
margin: calc(var(--spacing) * -<数字>);
m-(<自定义属性>)
margin: var(<自定义属性>);
m-[<值>]
margin: <值>;
mx-<数字>
margin-inline: calc(var(--spacing) * <数字>);
-mx-<数字>
margin-inline: calc(var(--spacing) * -<数字>);
mx-(<自定义属性>)
margin-inline: var(<自定义属性>);
mx-[<值>]
margin-inline: <值>;
my-<数字>
margin-block: calc(var(--spacing) * <数字>);
-my-<数字>
margin-block: calc(var(--spacing) * -<数字>);

示例

基本示例

使用 m-<数字> 工具类,如 m-4m-8 来控制元素所有边的外边距

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

给单边添加外边距

使用 mt-<数字>mr-<数字>mb-<数字>ml-<数字> 工具类,如 ml-2mt-6 来控制元素单边的外边距

mt-6
mr-4
mb-8
ml-2
<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-<数字> 工具类,如 mx-4mx-8 来控制元素的水平外边距

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

添加垂直外边距

使用 my-<数字> 工具类,如 my-4my-8 来控制元素的垂直外边距

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

使用负值

要使用负的外边距值,请在类名前面加上一个破折号,将其转换为负值

-mt-8
<div class="h-16 w-36 bg-sky-400 opacity-20 ..."></div><div class="-mt-8 bg-sky-300 ...">-mt-8</div>

使用逻辑属性

使用 ms-<数字>me-<数字> 工具类,如 ms-4me-8 来设置 margin-inline-startmargin-inline-end 逻辑属性

从左到右

ms-8
me-8

从右到左

ms-8
me-8
<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-<数字>space-y-<数字> 工具类,如 space-x-4space-y-8 来控制元素之间的间距

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

反转子元素顺序

如果你的元素是反向排列的(例如使用 flex-row-reverseflex-col-reverse),请使用 space-x-reversespace-y-reverse 工具类来确保间距添加到每个元素的正确一侧

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

限制

间距工具类实际上只是在组中给除最后一个元素之外的所有元素添加外边距的快捷方式,并且不适合处理复杂情况,如网格、换行的布局或子元素以复杂的自定义顺序而不是其自然的 DOM 顺序渲染的情况。

对于这些情况,最好在可能的情况下使用 间隙工具类,或者给每个元素添加外边距,并在父元素上使用匹配的负外边距。

此外,间距工具类不适用于 分割线工具类。对于这些情况,请考虑改为给子元素添加外边距/内边距工具类。

使用自定义值

使用类似以下的工具类 m-[<值>],mx-[<值>],mb-[<值>]来设置边距基于完全自定义的值

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

对于 CSS 变量,你还可以使用 m-(<自定义属性>) 语法

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

这只是 m-[var(<自定义属性>)] 的简写形式,它会自动为你添加 var() 函数。

响应式设计

前缀一个 margin 工具类 使用一个断点变体,如 md:,以便仅在中等 屏幕尺寸及以上时应用该工具类

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

变体文档 中了解有关使用变体的更多信息。

自定义你的主题

m-<数字>,mx-<数字>,my-<数字>,ms-<数字>,me-<数字>,mt-<数字>,mr-<数字>,mb-<数字>,ml-<数字> 工具类由 --spacing 主题变量驱动,你可以在自己的主题中自定义它 m-<数字>,mx-<数字>,my-<数字>,ms-<数字>,me-<数字>,mt-<数字>,mr-<数字>,mb-<数字>,ml-<数字>工具类由 --spacing 主题变量驱动,你可以在自己的主题中自定义它

@theme {  --spacing: 1px; }

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

版权所有 © 2025 Tailwind Labs Inc.·商标政策