Tailwind CSS 中文文档

主题

全部文档

间距

margin ​

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

快速参考 ​

类属性
m-<number>margin: calc(var(--spacing) * <number>);
-m-<number>margin: calc(var(--spacing) * -<number>);
m-automargin: auto;
m-pxmargin: 1px;
-m-pxmargin: -1px;
m-(<custom-property>)margin: var(<custom-property>);
m-[<value>]margin: <value>;
mx-<number>margin-inline: calc(var(--spacing) * <number>);
-mx-<number>margin-inline: calc(var(--spacing) * -<number>);
mx-automargin-inline: auto;
mx-pxmargin-inline: 1px;
-mx-pxmargin-inline: -1px;
mx-(<custom-property>)margin-inline: var(<custom-property>);
mx-[<value>]margin-inline: <value>;
my-<number>margin-block: calc(var(--spacing) * <number>);
-my-<number>margin-block: calc(var(--spacing) * -<number>);
my-automargin-block: auto;
my-pxmargin-block: 1px;
-my-pxmargin-block: -1px;
my-(<custom-property>)margin-block: var(<custom-property>);
my-[<value>]margin-block: <value>;
ms-<number>margin-inline-start: calc(var(--spacing) * <number>);
-ms-<number>margin-inline-start: calc(var(--spacing) * -<number>);
ms-automargin-inline-start: auto;
ms-pxmargin-inline-start: 1px;
-ms-pxmargin-inline-start: -1px;
ms-(<custom-property>)margin-inline-start: var(<custom-property>);
ms-[<value>]margin-inline-start: <value>;
me-<number>margin-inline-end: calc(var(--spacing) * <number>);
-me-<number>margin-inline-end: calc(var(--spacing) * -<number>);
me-automargin-inline-end: auto;
me-pxmargin-inline-end: 1px;
-me-pxmargin-inline-end: -1px;
me-(<custom-property>)margin-inline-end: var(<custom-property>);
me-[<value>]margin-inline-end: <value>;
mbs-<number>margin-block-start: calc(var(--spacing) * <number>);
-mbs-<number>margin-block-start: calc(var(--spacing) * -<number>);
mbs-automargin-block-start: auto;
mbs-pxmargin-block-start: 1px;
-mbs-pxmargin-block-start: -1px;
mbs-(<custom-property>)margin-block-start: var(<custom-property>);
mbs-[<value>]margin-block-start: <value>;
mbe-<number>margin-block-end: calc(var(--spacing) * <number>);
-mbe-<number>margin-block-end: calc(var(--spacing) * -<number>);
mbe-automargin-block-end: auto;
mbe-pxmargin-block-end: 1px;
-mbe-pxmargin-block-end: -1px;
mbe-(<custom-property>)margin-block-end: var(<custom-property>);
mbe-[<value>]margin-block-end: <value>;
mt-<number>margin-top: calc(var(--spacing) * <number>);
-mt-<number>margin-top: calc(var(--spacing) * -<number>);
mt-automargin-top: auto;
mt-pxmargin-top: 1px;
-mt-pxmargin-top: -1px;
mt-(<custom-property>)margin-top: var(<custom-property>);
mt-[<value>]margin-top: <value>;
mr-<number>margin-right: calc(var(--spacing) * <number>);
-mr-<number>margin-right: calc(var(--spacing) * -<number>);
mr-automargin-right: auto;
mr-pxmargin-right: 1px;
-mr-pxmargin-right: -1px;
mr-(<custom-property>)margin-right: var(<custom-property>);
mr-[<value>]margin-right: <value>;
mb-<number>margin-bottom: calc(var(--spacing) * <number>);
-mb-<number>margin-bottom: calc(var(--spacing) * -<number>);
mb-automargin-bottom: auto;
mb-pxmargin-bottom: 1px;
-mb-pxmargin-bottom: -1px;
mb-(<custom-property>)margin-bottom: var(<custom-property>);
mb-[<value>]margin-bottom: <value>;
ml-<number>margin-left: calc(var(--spacing) * <number>);
-ml-<number>margin-left: calc(var(--spacing) * -<number>);
ml-automargin-left: auto;
ml-pxmargin-left: 1px;
-ml-pxmargin-left: -1px;
ml-(<custom-property>)margin-left: var(<custom-property>);
ml-[<value>]margin-left: <value>;
space-x-<number>& > :not(:last-child) { --tw-space-x-reverse: 0; margin-inline-start: calc(calc(var(--spacing) * <number>) * var(--tw-space-x-reverse)); margin-inline-end: calc(calc(var(--spacing) * <number>) * calc(1 - var(--tw-space-x-reverse))); };
-space-x-<number>& > :not(:last-child) { --tw-space-x-reverse: 0; margin-inline-start: calc(calc(var(--spacing) * -<number>) * var(--tw-space-x-reverse)); margin-inline-end: calc(calc(var(--spacing) * -<number>) * calc(1 - var(--tw-space-x-reverse))); };
space-x-px& > :not(:last-child) { --tw-space-x-reverse: 0; margin-inline-start: calc(1px * var(--tw-space-x-reverse)); margin-inline-end: calc(1px * calc(1 - var(--tw-space-x-reverse))); };
-space-x-px& > :not(:last-child) { --tw-space-x-reverse: 0; margin-inline-start: calc(-1px * var(--tw-space-x-reverse)); margin-inline-end: calc(-1px * calc(1 - var(--tw-space-x-reverse))); };
space-x-(<custom-property>)& > :not(:last-child) { --tw-space-x-reverse: 0; margin-inline-start: calc(var(<custom-property>) * var(--tw-space-x-reverse)); margin-inline-end: calc(var(<custom-property>) * calc(1 - var(--tw-space-x-reverse))); };
space-x-[<value>]& > :not(:last-child) { --tw-space-x-reverse: 0; margin-inline-start: calc(<value> * var(--tw-space-x-reverse)); margin-inline-end: calc(<value> * calc(1 - var(--tw-space-x-reverse))); };
space-y-<number>& > :not(:last-child) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * <number>) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * <number>) * calc(1 - var(--tw-space-y-reverse))); };
-space-y-<number>& > :not(:last-child) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * -<number>) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * -<number>) * calc(1 - var(--tw-space-y-reverse))); };
space-y-px& > :not(:last-child) { --tw-space-y-reverse: 0; margin-block-start: calc(1px * var(--tw-space-y-reverse)); margin-block-end: calc(1px * calc(1 - var(--tw-space-y-reverse))); };
-space-y-px& > :not(:last-child) { --tw-space-y-reverse: 0; margin-block-start: calc(-1px * var(--tw-space-y-reverse)); margin-block-end: calc(-1px * calc(1 - var(--tw-space-y-reverse))); };
space-y-(<custom-property>)& > :not(:last-child) { --tw-space-y-reverse: 0; margin-block-start: calc(var(<custom-property>) * var(--tw-space-y-reverse)); margin-block-end: calc(var(<custom-property>) * calc(1 - var(--tw-space-y-reverse))); };
space-y-[<value>]& > :not(:last-child) { --tw-space-y-reverse: 0; margin-block-start: calc(<value> * var(--tw-space-y-reverse)); margin-block-end: calc(<value> * calc(1 - var(--tw-space-y-reverse))); };
space-x-reverse& > :not(:last-child)) { --tw-space-x-reverse: 1; }
space-y-reverse& > :not(:last-child)) { --tw-space-y-reverse: 1; }

示例 ​

基础示例 ​

使用 m-<number> 这类工具类（如 m-4 和 m-8）控制元素四周的外边距：

m-8
html
<!-- [!code classes:m-8] -->
<div class="m-8 ...">m-8</div>

为单侧添加外边距 ​

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

mt-6
mr-4
mb-8
ml-2
html
<!-- [!code classes: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-<number> 这类工具类（如 mx-4 和 mx-8）控制元素的水平外边距：

mx-8
html
<!-- [!code classes:mx-8] -->
<div class="mx-8 ...">mx-8</div>

添加垂直外边距 ​

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

my-8
html
<!-- [!code classes:my-8] -->
<div class="my-8 ...">my-8</div>

使用负值 ​

要使用负的外边距值，在类名前加一个短横线即可将其转为负值：

-mt-8
html
<!-- [!code classes:-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-<number> 或 me-<number> 这类工具类（如 ms-4 和 me-8）设置 margin-inline-start 和 margin-inline-end 逻辑属性：

Left-to-right

ms-8
me-8

Right-to-left

ms-8
me-8
html
<!-- [!code classes:ms-8,me-8] -->
<!-- [!code word:dir="ltr"] -->
<!-- [!code word:dir="rtl"] -->
<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>

使用 mbs-<number> 和 mbe-<number> 工具类设置 margin-block-start 和 margin-block-end 逻辑属性，它们会根据书写模式映射到顶部或底部：

html
<!-- [!code classes:mbs-8] -->
<div class="mbs-8 ...">mbs-8</div>

在子元素之间添加间距 ​

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

01
02
03
html
<!-- [!code classes:space-x-4] -->
<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 工具类，确保间距加在每个元素正确的一侧：

01
02
03
html
<!-- [!code classes:flex-row-reverse,space-x-4,space-x-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 工具类，或者给每个元素添加外边距，并在父元素上使用对应的负外边距。

此外，间距工具类并非设计来与 分隔线工具类 一起使用。那种情况请考虑给子元素添加外边距/内边距工具类。

使用自定义值 ​

使用 m-[<value>]、mx-[<value>] 和 mb-[<value>] 这类工具类，按完全自定义的值设置外边距：

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

对于 CSS 变量，也可以使用 m-(<custom-property>) 语法：

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

这只是 m-[var(<custom-property>)] 的简写，会自动帮你加上 var() 函数。

响应式设计 ​

在 margin 工具类前加上 md: 这样的断点变体，即可仅在中等及以上屏幕尺寸下应用该工具类：

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

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

自定义主题 ​

m-<number>、mx-<number>、my-<number>、ms-<number>、me-<number>、mbs-<number>、mbe-<number>、mt-<number>、mr-<number>、mb-<number> 和 ml-<number> 工具类由 --spacing 主题变量驱动，你可以在自己的主题中自定义它：

css
@theme {
  --spacing: 1px;
}

在 主题变量文档 中了解如何自定义间距比例。

文档译文以 MIT 协议授权；原文版权归 Tailwind Labs。湘ICP备2026005453号-2

Copyright © Tailwind Labs, Inc.