快速参考

属性
m-0margin: 0px;
mx-0margin-left: 0px; margin-right: 0px;
my-0margin-top: 0px; margin-bottom: 0px;
ms-0margin-inline-start: 0px;
me-0margin-inline-end: 0px;
mt-0margin-top: 0px;
mr-0margin-right: 0px;
mb-0margin-bottom: 0px;
ml-0margin-left: 0px;
m-pxmargin: 1px;
mx-pxmargin-left: 1px; margin-right: 1px;
my-pxmargin-top: 1px; margin-bottom: 1px;
ms-pxmargin-inline-start: 1px;
me-pxmargin-inline-end: 1px;
mt-pxmargin-top: 1px;
mr-pxmargin-right: 1px;
mb-pxmargin-bottom: 1px;
ml-pxmargin-left: 1px;
m-0.5margin: 0.125rem; /* 2px */
mx-0.5margin-left: 0.125rem; /* 2px */ margin-right: 0.125rem; /* 2px */
my-0.5margin-top: 0.125rem; /* 2px */ margin-bottom: 0.125rem; /* 2px */
ms-0.5margin-inline-start: 0.125rem; /* 2px */
me-0.5margin-inline-end: 0.125rem; /* 2px */
mt-0.5margin-top: 0.125rem; /* 2px */
mr-0.5margin-right: 0.125rem; /* 2px */
mb-0.5margin-bottom: 0.125rem; /* 2px */
ml-0.5margin-left: 0.125rem; /* 2px */
m-1margin: 0.25rem; /* 4px */
mx-1margin-left: 0.25rem; /* 4px */ margin-right: 0.25rem; /* 4px */
my-1margin-top: 0.25rem; /* 4px */ margin-bottom: 0.25rem; /* 4px */
ms-1margin-inline-start: 0.25rem; /* 4px */
me-1margin-inline-end: 0.25rem; /* 4px */
mt-1margin-top: 0.25rem; /* 4px */
mr-1margin-right: 0.25rem; /* 4px */
mb-1margin-bottom: 0.25rem; /* 4px */
ml-1margin-left: 0.25rem; /* 4px */
m-1.5margin: 0.375rem; /* 6px */
mx-1.5margin-left: 0.375rem; /* 6px */ margin-right: 0.375rem; /* 6px */
my-1.5margin-top: 0.375rem; /* 6px */ margin-bottom: 0.375rem; /* 6px */
ms-1.5margin-inline-start: 0.375rem; /* 6px */
me-1.5margin-inline-end: 0.375rem; /* 6px */
mt-1.5margin-top: 0.375rem; /* 6px */
mr-1.5margin-right: 0.375rem; /* 6px */
mb-1.5margin-bottom: 0.375rem; /* 6px */
ml-1.5margin-left: 0.375rem; /* 6px */
m-2margin: 0.5rem; /* 8px */
mx-2margin-left: 0.5rem; /* 8px */ margin-right: 0.5rem; /* 8px */
my-2margin-top: 0.5rem; /* 8px */ margin-bottom: 0.5rem; /* 8px */
ms-2margin-inline-start: 0.5rem; /* 8px */
me-2margin-inline-end: 0.5rem; /* 8px */
mt-2margin-top: 0.5rem; /* 8px */
mr-2margin-right: 0.5rem; /* 8px */
mb-2margin-bottom: 0.5rem; /* 8px */
ml-2margin-left: 0.5rem; /* 8px */
m-2.5margin: 0.625rem; /* 10px */
mx-2.5margin-left: 0.625rem; /* 10px */ margin-right: 0.625rem; /* 10px */
my-2.5margin-top: 0.625rem; /* 10px */ margin-bottom: 0.625rem; /* 10px */
ms-2.5margin-inline-start: 0.625rem; /* 10px */
me-2.5margin-inline-end: 0.625rem; /* 10px */
mt-2.5margin-top: 0.625rem; /* 10px */
mr-2.5margin-right: 0.625rem; /* 10px */
mb-2.5margin-bottom: 0.625rem; /* 10px */
ml-2.5margin-left: 0.625rem; /* 10px */
m-3margin: 0.75rem; /* 12px */
mx-3margin-left: 0.75rem; /* 12px */ margin-right: 0.75rem; /* 12px */
my-3margin-top: 0.75rem; /* 12px */ margin-bottom: 0.75rem; /* 12px */
ms-3margin-inline-start: 0.75rem; /* 12px */
me-3margin-inline-end: 0.75rem; /* 12px */
mt-3margin-top: 0.75rem; /* 12px */
mr-3margin-right: 0.75rem; /* 12px */
mb-3margin-bottom: 0.75rem; /* 12px */
ml-3margin-left: 0.75rem; /* 12px */
m-3.5margin: 0.875rem; /* 14px */
mx-3.5margin-left: 0.875rem; /* 14px */ margin-right: 0.875rem; /* 14px */
my-3.5margin-top: 0.875rem; /* 14px */ margin-bottom: 0.875rem; /* 14px */
ms-3.5margin-inline-start: 0.875rem; /* 14px */
me-3.5margin-inline-end: 0.875rem; /* 14px */
mt-3.5margin-top: 0.875rem; /* 14px */
mr-3.5margin-right: 0.875rem; /* 14px */
mb-3.5margin-bottom: 0.875rem; /* 14px */
ml-3.5margin-left: 0.875rem; /* 14px */
m-4margin: 1rem; /* 16px */
mx-4margin-left: 1rem; /* 16px */ margin-right: 1rem; /* 16px */
my-4margin-top: 1rem; /* 16px */ margin-bottom: 1rem; /* 16px */
ms-4margin-inline-start: 1rem; /* 16px */
me-4margin-inline-end: 1rem; /* 16px */
mt-4margin-top: 1rem; /* 16px */
mr-4margin-right: 1rem; /* 16px */
mb-4margin-bottom: 1rem; /* 16px */
ml-4margin-left: 1rem; /* 16px */
m-5margin: 1.25rem; /* 20px */
mx-5margin-left: 1.25rem; /* 20px */ margin-right: 1.25rem; /* 20px */
my-5margin-top: 1.25rem; /* 20px */ margin-bottom: 1.25rem; /* 20px */
ms-5margin-inline-start: 1.25rem; /* 20px */
me-5margin-inline-end: 1.25rem; /* 20px */
mt-5margin-top: 1.25rem; /* 20px */
mr-5margin-right: 1.25rem; /* 20px */
mb-5margin-bottom: 1.25rem; /* 20px */
ml-5margin-left: 1.25rem; /* 20px */
m-6margin: 1.5rem; /* 24px */
mx-6margin-left: 1.5rem; /* 24px */ margin-right: 1.5rem; /* 24px */
my-6margin-top: 1.5rem; /* 24px */ margin-bottom: 1.5rem; /* 24px */
ms-6margin-inline-start: 1.5rem; /* 24px */
me-6margin-inline-end: 1.5rem; /* 24px */
mt-6margin-top: 1.5rem; /* 24px */
mr-6margin-right: 1.5rem; /* 24px */
mb-6margin-bottom: 1.5rem; /* 24px */
ml-6margin-left: 1.5rem; /* 24px */
m-7margin: 1.75rem; /* 28px */
mx-7margin-left: 1.75rem; /* 28px */ margin-right: 1.75rem; /* 28px */
my-7margin-top: 1.75rem; /* 28px */ margin-bottom: 1.75rem; /* 28px */
ms-7margin-inline-start: 1.75rem; /* 28px */
me-7margin-inline-end: 1.75rem; /* 28px */
mt-7margin-top: 1.75rem; /* 28px */
mr-7margin-right: 1.75rem; /* 28px */
mb-7margin-bottom: 1.75rem; /* 28px */
ml-7margin-left: 1.75rem; /* 28px */
m-8margin: 2rem; /* 32px */
mx-8margin-left: 2rem; /* 32px */ margin-right: 2rem; /* 32px */
my-8margin-top: 2rem; /* 32px */ margin-bottom: 2rem; /* 32px */
ms-8margin-inline-start: 2rem; /* 32px */
me-8margin-inline-end: 2rem; /* 32px */
mt-8margin-top: 2rem; /* 32px */
mr-8margin-right: 2rem; /* 32px */
mb-8margin-bottom: 2rem; /* 32px */
ml-8margin-left: 2rem; /* 32px */
m-9margin: 2.25rem; /* 36px */
mx-9margin-left: 2.25rem; /* 36px */ margin-right: 2.25rem; /* 36px */
my-9margin-top: 2.25rem; /* 36px */ margin-bottom: 2.25rem; /* 36px */
ms-9margin-inline-start: 2.25rem; /* 36px */
me-9margin-inline-end: 2.25rem; /* 36px */
mt-9margin-top: 2.25rem; /* 36px */
mr-9margin-right: 2.25rem; /* 36px */
mb-9margin-bottom: 2.25rem; /* 36px */
ml-9margin-left: 2.25rem; /* 36px */
m-10margin: 2.5rem; /* 40px */
mx-10margin-left: 2.5rem; /* 40px */ margin-right: 2.5rem; /* 40px */
my-10margin-top: 2.5rem; /* 40px */ margin-bottom: 2.5rem; /* 40px */
ms-10margin-inline-start: 2.5rem; /* 40px */
me-10margin-inline-end: 2.5rem; /* 40px */
mt-10margin-top: 2.5rem; /* 40px */
mr-10margin-right: 2.5rem; /* 40px */
mb-10margin-bottom: 2.5rem; /* 40px */
ml-10margin-left: 2.5rem; /* 40px */
m-11margin: 2.75rem; /* 44px */
mx-11margin-left: 2.75rem; /* 44px */ margin-right: 2.75rem; /* 44px */
my-11margin-top: 2.75rem; /* 44px */ margin-bottom: 2.75rem; /* 44px */
ms-11margin-inline-start: 2.75rem; /* 44px */
me-11margin-inline-end: 2.75rem; /* 44px */
mt-11margin-top: 2.75rem; /* 44px */
mr-11margin-right: 2.75rem; /* 44px */
mb-11margin-bottom: 2.75rem; /* 44px */
ml-11margin-left: 2.75rem; /* 44px */
m-12margin: 3rem; /* 48px */
mx-12margin-left: 3rem; /* 48px */ margin-right: 3rem; /* 48px */
my-12margin-top: 3rem; /* 48px */ margin-bottom: 3rem; /* 48px */
ms-12margin-inline-start: 3rem; /* 48px */
me-12margin-inline-end: 3rem; /* 48px */
mt-12margin-top: 3rem; /* 48px */
mr-12margin-right: 3rem; /* 48px */
mb-12margin-bottom: 3rem; /* 48px */
ml-12margin-left: 3rem; /* 48px */
m-14margin: 3.5rem; /* 56px */
mx-14margin-left: 3.5rem; /* 56px */ margin-right: 3.5rem; /* 56px */
my-14margin-top: 3.5rem; /* 56px */ margin-bottom: 3.5rem; /* 56px */
ms-14margin-inline-start: 3.5rem; /* 56px */
me-14margin-inline-end: 3.5rem; /* 56px */
mt-14margin-top: 3.5rem; /* 56px */
mr-14margin-right: 3.5rem; /* 56px */
mb-14margin-bottom: 3.5rem; /* 56px */
ml-14margin-left: 3.5rem; /* 56px */
m-16margin: 4rem; /* 64px */
mx-16margin-left: 4rem; /* 64px */ margin-right: 4rem; /* 64px */
my-16margin-top: 4rem; /* 64px */ margin-bottom: 4rem; /* 64px */
ms-16margin-inline-start: 4rem; /* 64px */
me-16margin-inline-end: 4rem; /* 64px */
mt-16margin-top: 4rem; /* 64px */
mr-16margin-right: 4rem; /* 64px */
mb-16margin-bottom: 4rem; /* 64px */
ml-16margin-left: 4rem; /* 64px */
m-20margin: 5rem; /* 80px */
mx-20margin-left: 5rem; /* 80px */ margin-right: 5rem; /* 80px */
my-20margin-top: 5rem; /* 80px */ margin-bottom: 5rem; /* 80px */
ms-20margin-inline-start: 5rem; /* 80px */
me-20margin-inline-end: 5rem; /* 80px */
mt-20margin-top: 5rem; /* 80px */
mr-20margin-right: 5rem; /* 80px */
mb-20margin-bottom: 5rem; /* 80px */
ml-20margin-left: 5rem; /* 80px */
m-24margin: 6rem; /* 96px */
mx-24margin-left: 6rem; /* 96px */ margin-right: 6rem; /* 96px */
my-24margin-top: 6rem; /* 96px */ margin-bottom: 6rem; /* 96px */
ms-24margin-inline-start: 6rem; /* 96px */
me-24margin-inline-end: 6rem; /* 96px */
mt-24margin-top: 6rem; /* 96px */
mr-24margin-right: 6rem; /* 96px */
mb-24margin-bottom: 6rem; /* 96px */
ml-24margin-left: 6rem; /* 96px */
m-28margin: 7rem; /* 112px */
mx-28margin-left: 7rem; /* 112px */ margin-right: 7rem; /* 112px */
my-28margin-top: 7rem; /* 112px */ margin-bottom: 7rem; /* 112px */
ms-28margin-inline-start: 7rem; /* 112px */
me-28margin-inline-end: 7rem; /* 112px */
mt-28margin-top: 7rem; /* 112px */
mr-28margin-right: 7rem; /* 112px */
mb-28margin-bottom: 7rem; /* 112px */
ml-28margin-left: 7rem; /* 112px */
m-32margin: 8rem; /* 128px */
mx-32margin-left: 8rem; /* 128px */ margin-right: 8rem; /* 128px */
my-32margin-top: 8rem; /* 128px */ margin-bottom: 8rem; /* 128px */
ms-32margin-inline-start: 8rem; /* 128px */
me-32margin-inline-end: 8rem; /* 128px */
mt-32margin-top: 8rem; /* 128px */
mr-32margin-right: 8rem; /* 128px */
mb-32margin-bottom: 8rem; /* 128px */
ml-32margin-left: 8rem; /* 128px */
m-36margin: 9rem; /* 144px */
mx-36margin-left: 9rem; /* 144px */ margin-right: 9rem; /* 144px */
my-36margin-top: 9rem; /* 144px */ margin-bottom: 9rem; /* 144px */
ms-36margin-inline-start: 9rem; /* 144px */
me-36margin-inline-end: 9rem; /* 144px */
mt-36margin-top: 9rem; /* 144px */
mr-36margin-right: 9rem; /* 144px */
mb-36margin-bottom: 9rem; /* 144px */
ml-36margin-left: 9rem; /* 144px */
m-40margin: 10rem; /* 160px */
mx-40margin-left: 10rem; /* 160px */ margin-right: 10rem; /* 160px */
my-40margin-top: 10rem; /* 160px */ margin-bottom: 10rem; /* 160px */
ms-40margin-inline-start: 10rem; /* 160px */
me-40margin-inline-end: 10rem; /* 160px */
mt-40margin-top: 10rem; /* 160px */
mr-40margin-right: 10rem; /* 160px */
mb-40margin-bottom: 10rem; /* 160px */
ml-40margin-left: 10rem; /* 160px */
m-44margin: 11rem; /* 176px */
mx-44margin-left: 11rem; /* 176px */ margin-right: 11rem; /* 176px */
my-44margin-top: 11rem; /* 176px */ margin-bottom: 11rem; /* 176px */
ms-44margin-inline-start: 11rem; /* 176px */
me-44margin-inline-end: 11rem; /* 176px */
mt-44margin-top: 11rem; /* 176px */
mr-44margin-right: 11rem; /* 176px */
mb-44margin-bottom: 11rem; /* 176px */
ml-44margin-left: 11rem; /* 176px */
m-48margin: 12rem; /* 192px */
mx-48margin-left: 12rem; /* 192px */ margin-right: 12rem; /* 192px */
my-48margin-top: 12rem; /* 192px */ margin-bottom: 12rem; /* 192px */
ms-48margin-inline-start: 12rem; /* 192px */
me-48margin-inline-end: 12rem; /* 192px */
mt-48margin-top: 12rem; /* 192px */
mr-48margin-right: 12rem; /* 192px */
mb-48margin-bottom: 12rem; /* 192px */
ml-48margin-left: 12rem; /* 192px */
m-52margin: 13rem; /* 208px */
mx-52margin-left: 13rem; /* 208px */ margin-right: 13rem; /* 208px */
my-52margin-top: 13rem; /* 208px */ margin-bottom: 13rem; /* 208px */
ms-52margin-inline-start: 13rem; /* 208px */
me-52margin-inline-end: 13rem; /* 208px */
mt-52margin-top: 13rem; /* 208px */
mr-52margin-right: 13rem; /* 208px */
mb-52margin-bottom: 13rem; /* 208px */
ml-52margin-left: 13rem; /* 208px */
m-56margin: 14rem; /* 224px */
mx-56margin-left: 14rem; /* 224px */ margin-right: 14rem; /* 224px */
my-56margin-top: 14rem; /* 224px */ margin-bottom: 14rem; /* 224px */
ms-56margin-inline-start: 14rem; /* 224px */
me-56margin-inline-end: 14rem; /* 224px */
mt-56margin-top: 14rem; /* 224px */
mr-56margin-right: 14rem; /* 224px */
mb-56margin-bottom: 14rem; /* 224px */
ml-56margin-left: 14rem; /* 224px */
m-60margin: 15rem; /* 240px */
mx-60margin-left: 15rem; /* 240px */ margin-right: 15rem; /* 240px */
my-60margin-top: 15rem; /* 240px */ margin-bottom: 15rem; /* 240px */
ms-60margin-inline-start: 15rem; /* 240px */
me-60margin-inline-end: 15rem; /* 240px */
mt-60margin-top: 15rem; /* 240px */
mr-60margin-right: 15rem; /* 240px */
mb-60margin-bottom: 15rem; /* 240px */
ml-60margin-left: 15rem; /* 240px */
m-64margin: 16rem; /* 256px */
mx-64margin-left: 16rem; /* 256px */ margin-right: 16rem; /* 256px */
my-64margin-top: 16rem; /* 256px */ margin-bottom: 16rem; /* 256px */
ms-64margin-inline-start: 16rem; /* 256px */
me-64margin-inline-end: 16rem; /* 256px */
mt-64margin-top: 16rem; /* 256px */
mr-64margin-right: 16rem; /* 256px */
mb-64margin-bottom: 16rem; /* 256px */
ml-64margin-left: 16rem; /* 256px */
m-72margin: 18rem; /* 288px */
mx-72margin-left: 18rem; /* 288px */ margin-right: 18rem; /* 288px */
my-72margin-top: 18rem; /* 288px */ margin-bottom: 18rem; /* 288px */
ms-72margin-inline-start: 18rem; /* 288px */
me-72margin-inline-end: 18rem; /* 288px */
mt-72margin-top: 18rem; /* 288px */
mr-72margin-right: 18rem; /* 288px */
mb-72margin-bottom: 18rem; /* 288px */
ml-72margin-left: 18rem; /* 288px */
m-80margin: 20rem; /* 320px */
mx-80margin-left: 20rem; /* 320px */ margin-right: 20rem; /* 320px */
my-80margin-top: 20rem; /* 320px */ margin-bottom: 20rem; /* 320px */
ms-80margin-inline-start: 20rem; /* 320px */
me-80margin-inline-end: 20rem; /* 320px */
mt-80margin-top: 20rem; /* 320px */
mr-80margin-right: 20rem; /* 320px */
mb-80margin-bottom: 20rem; /* 320px */
ml-80margin-left: 20rem; /* 320px */
m-96margin: 24rem; /* 384px */
mx-96margin-left: 24rem; /* 384px */ margin-right: 24rem; /* 384px */
my-96margin-top: 24rem; /* 384px */ margin-bottom: 24rem; /* 384px */
ms-96margin-inline-start: 24rem; /* 384px */
me-96margin-inline-end: 24rem; /* 384px */
mt-96margin-top: 24rem; /* 384px */
mr-96margin-right: 24rem; /* 384px */
mb-96margin-bottom: 24rem; /* 384px */
ml-96margin-left: 24rem; /* 384px */
m-automargin: auto;
mx-automargin-left: auto; margin-right: auto;
my-automargin-top: auto; margin-bottom: auto;
ms-automargin-inline-start: auto;
me-automargin-inline-end: auto;
mt-automargin-top: auto;
mr-automargin-right: auto;
mb-automargin-bottom: auto;
ml-automargin-left: auto;

基本用法

添加单边边距

使用 m{t|r|b|l}-{size} 实用程序控制元素的一侧边距。

例如,mt-6 会在元素顶部添加 1.5rem 的边距,mr-4 会在元素右侧添加 1rem 的边距,mb-8 会在元素底部添加 2rem 的边距,而 ml-2 会在元素左侧添加 0.5rem 的边距。

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-{size} 实用程序控制元素的水平边距。

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

添加垂直边距

使用 my-{size} 实用程序控制元素的垂直边距。

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

在所有边添加边距

使用 m-{size} 实用程序控制元素所有边的边距。

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

使用负值

要使用负边距值,请在类名前添加一个连字符将其转换为负值。

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

使用逻辑属性

使用 ms-*me-* 实用程序设置 margin-inline-startmargin-inline-end 逻辑属性,它们映射到基于文本方向的左侧或右侧。

从左到右

ms-8
me-8

从右到左

ms-8
me-8
<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>

为了获得更多控制,您还可以使用 LTR 和 RTL 修饰符 根据当前文本方向有条件地应用特定样式。


有条件地应用

悬停、焦点和其他状态

Tailwind 允许您使用变体修饰符在不同状态下有条件地应用实用程序类。例如,使用 hover:mt-8 仅在悬停时应用 mt-8 实用程序。

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

有关所有可用状态修饰符的完整列表,请查看 悬停、焦点和其它状态 文档。

断点和媒体查询

您还可以使用变体修饰符来定位媒体查询,例如响应式断点、暗模式、prefers-reduced-motion 等等。例如,使用 md:mt-8 仅在中等屏幕尺寸及以上时应用 mt-8 实用程序。

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

要了解更多信息,请查看有关 响应式设计暗模式其他媒体查询修饰符 的文档。


使用自定义值

自定义您的主题

默认情况下,Tailwind 的边距比例使用 默认间距比例。您可以通过编辑 tailwind.config.js 文件中的 theme.spacingtheme.extend.spacing 来自定义您的间距比例。

tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        '5px': '5px',
      }
    }
  }
}

或者,您可以通过编辑 tailwind.config.js 文件中的 theme.margintheme.extend.margin 来仅自定义边距比例。

tailwind.config.js
module.exports = {
  theme: {
    extend: {
      margin: {
        '5px': '5px',
      }
    }
  }
}

主题自定义 文档中了解有关自定义默认主题的更多信息。

任意值

如果您需要使用一个不适合包含在主题中的 margin 值,请使用方括号使用任何任意值动态生成属性。

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

任意值 文档中了解有关任意值支持的更多信息。