在 CSS 中，外边距指的是边框到 “父元素” 或 “兄弟元素” 之间的那一部分。外边距是在元素边框的外部的。
Tailwind CSS 外边距语法
在 Tailwind CSS 中，我们可以使用 “m-” 前缀配合 “数值” 来定义元素的外边距。
语法：
m-{值}说明：
与 “Tailwind CSS 宽高” 一样，外边距的数值也是以 4px 为一个单位。比如：
m-1：表示 margin 为 4px。m-2：表示 margin 为 8px。m-3：表示 margin 为 12px。- ……
此外，我们还可以定义不同方向的 margin。比如：
m-{值}：用于设置 “四个方向” 的 margin，比如 “m-4” 表示上下左右四个方向的外边距都是 16px。mx-{值}：用于设置 “水平方向” 的 margin，即同时设置 margin-left 和 margin-right。my-{值}：用于设置 “水平方向” 的 margin，即同时设置 margin-top 和 margin-bottom。mt-（上内边距）、mb-（下内边距）、ml-（左内边距）、mr-（右内边距）。
Tailwind CSS 外边距示例
接下来，我们通过一个简单的例子来介绍一下 Tailwind CSS 如何定义外边距的。
示例 1：定义外边距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body>
<div class="w-32 h-16 bg-blue-400">
box1
</div>
<div class="w-32 h-16 bg-green-400 mt-8">
box2
</div>
</body>
</html>页面效果如下图所示。
分析：
“mt-8” 表示定义 margin-top 为 32px。此时绿色方块就会在自己的上方强制撑开 32px 的空白区域，从而把自己向下推，与上面的蓝色方块拉开距离。
Tailwind CSS 水平居中（mx-auto）
在实际开发中，我们经常需要让一个块级元素在父容器中水平居中显示。在传统 CSS 中，我们一般会使用 margin: 0 auto; 来实现。而在 Tailwind CSS 中，这个属性被简化为了一个极其经典的类名：mx-auto。
示例 2：mx-auto 实现水平居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body>
<div class="w-96 h-48 bg-red-400">
<div class="w-40 h-20 bg-green-400 mx-auto"></div>
</div>
</body>
</html>页面效果如下图所示。
分析：
首先我们给子元素定义了一个固定宽度（w-40），然后再给它添加类名 “mx-auto”，此时它就会在父容器中水平居中了。
注意: 使用 mx-auto 的前提是元素必须有确定的宽度，否则它无法计算剩余空间，然后会导致无法水平居中。
Tailwind CSS 负外边距
我们都知道，内边距（padding）只能是正数，这是因为盒子里面不可能没有空间。但外边距是可以设置为负数的。
负外边距是前端排版中的一个 “黑科技”。当外边距变成负数时，元素不仅不会把别人推开，反而会 “拉拽” 自己去覆盖别人，从而产生重叠的视觉效果。
在 Tailwind CSS 中，负外边距的写法非常简单：只需要在原来的类名前面加上一个减号 “-” 即可，比如 -mt-4、-ml-6。
示例 3：定义负外边距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body>
<div class="w-48 h-32 bg-red-400 mx-auto"></div>
<div class="w-24 h-12 bg-green-400 mx-auto -mt-6"></div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们给绿色方框定义了 “-mt-6”，此时表示将其外边距定义为 “-24px”。此时绿色方块会强行向上 “拉拽” 自己，从而覆盖在红色方块的下边缘，形成了非常经典的卡片重叠效果。
负外边距实现用户头像叠加这种效果很常见，比如咱们的绿叶网就使用到了，如下图所示。
Tailwind CSS 间距类名（space）
在实际开发中，我们经常会遇到一组元素排在一起的情况（比如文章列表、导航菜单）。如果给每个子元素都去写 mt-4 或 ml-4，不仅啰嗦，还很容易引发 “外边距塌陷” 问题。
为了解决这个问题，Tailwind CSS 提供了一个专门处理 “子元素间距” 的杀手锏：space-x-* 和 space-y-*。
语法：
space-x-{值}
space-y-{值}说明：
“space-x-{值}” 用于控制水平排列的子元素之间的间距（左右间距）。
“space-y-{值}” 用于控制垂直排列的子元素之间的间距（上下间距）。
示例 4：使用间距类名
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10 bg-gray-50">
<div class="space-y-4 bg-white p-6 rounded-lg shadow-md max-w-sm">
<div class="bg-green-100 p-3 rounded text-green-700">
第 1 章：Tailwind 起步
</div>
<div class="bg-green-100 p-3 rounded text-green-700">
第 2 章：Tailwind 盒子
</div>
<div class="bg-green-100 p-3 rounded text-green-700">
第 3 章：Tailwind 文本
</div>
</div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们只需要在父容器 div 上写一个 space-y-4，然后它的 3 个子元素之间自动隔开了 16px（4 × 4px）的距离。
第 1 个子元素的上方不会产生多余间距。这是因为 space 类的底层逻辑是给除了第 1 个以外的所有子元素添加 margin-top。
如果以后我们想把间距调大，只需要修改父容器的一个类名即可（比如改为 space-y-8），而不需要去逐个修改子元素，非常的方便。
提示: 在开发导航栏（水平排列）时，使用 Flex 布局 配合 space-x-* 是目前前端界最主流、最高效的布局套路，小伙伴们一定要熟练掌握。
常见问题
1. 为什么我给两个上下相邻的元素都设置了 m-4（16px），但发现它们之间的距离不是 32px 而是 16px 呢？
这是一个非常经典的 CSS 现象，叫做 “外边距塌陷”。在 CSS 中，如果给上面的元素设置了 margin-bottom，然后给下面的元素设置了 margin-top，此时上下相邻的两个外边距相遇，它们并不会简单相加，而是会 “合并（塌陷）” 成其中较大的那一个值。
实际上，这是 CSS 的底层机制导致的，并不是 Tailwind CSS 自身的问题。在实际开发中，为了避免外边距塌陷问题，建议统一只给元素设置单向的外边距（比如只设置 margin-bottom）。
