Margin 边距

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

Class	Properties

基本用法

向单侧添加外边距

使用 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-start 和 margin-inline-end 逻辑属性，这些属性根据文本方向映射到左侧或右侧。

Left-to-right

ms-8

me-8

Right-to-left

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>

要查看所有可用状态修饰符的完整列表，请查看悬停，焦点和其他状态文档。

断点和媒体查询

您还可以使用变体修饰符来定位媒体查询，如响应式断点、暗模式、偏好减少动作等。例如，使用 md:mt-8 仅在中等屏幕尺寸及以上应用 mt-8 实用程序。

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

要了解更多信息，请查看有关响应式设计、深色模式和其他媒体查询修改器的文档。

使用自定义值

自定义您的主题

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

tailwind.config.js

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

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

tailwind.config.js

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

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

任意值

如果您需要使用一次性 margin 值，而这个值在您的主题中没有意义，可以使用方括号来使用任意值动态生成属性。

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

了解有关任意值支持的更多信息，请参阅任意值文档。