Tailwind CSS - 外边距

Tailwind CSS - 外边距

外边距功能类是任何布局的基础，用于在元素周围、边框外部创建空间。Tailwind CSS 提供了一套全面而直观的类，用于控制元素所有边或特定边的外边距。

外边距功能类

外边距类遵循逻辑且一致的命名约定。* 对应于您的 theme.spacing 配置中的一个键。

类名	描述
m-*	设置所有边的外边距（例如，m-4）。
mx-*	设置水平外边距（左和右）（例如，mx-8）。
my-*	设置垂直外边距（上和下）（例如，my-2）。
mt-*	设置上边的外边距（例如，mt-6）。
mr-*	设置右边的外边距（例如，mr-3）。
mb-*	设置下边的外边距（例如，mb-10）。
ml-*	设置左边的外边距（例如，ml-1）。
ms-*	设置逻辑内联起始外边距（LTR 中为左，RTL 中为右）。
me-*	设置逻辑内联结束外边距（LTR 中为右，RTL 中为左）。

核心概念

• 间距刻度：外边距类中的数字（例如 m-4）对应于 Tailwind 的间距刻度中的一个值。默认情况下，1 是 0.25rem（或 4px），因此 m-4 转换为 margin: 1rem;。
• 负外边距：要应用负外边距，请在类名前添加一个破折号前缀，如 -m-4 或 -mt-8。这对于重叠元素很有用。
• 任意值：为了像素级精确控制，您可以在方括号中使用任意值：m-[10px] 或 mt-[3.3rem]。
• 自动外边距：mx-auto 类是一个广泛使用的功能类，用于在其父元素内居中具有定义宽度的块级元素。
• 逻辑属性：ms-*（起始外边距）和 me-*（结束外边距）是创建自动支持从左到右 (LTR) 和从右到左 (RTL) 语言布局的现代最佳实践。

实际示例

示例 1：登录表单的间距和居中

此示例演示了如何使用各种外边距功能类来构建一个简单表单。mx-auto 使表单居中，mb-4 在字段之间添加空间，而 mt-6 在按钮上方提供额外空间。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Margin Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-200 py-12">

  <!-- 容器使用 mx-auto 水平居中 -->
  <div class="max-w-md mx-auto bg-white rounded-xl shadow-md p-8">
    <h2 class="text-2xl font-bold text-center mb-6">Login</h2>
    <form>
      <div class="mb-4"> <!-- 电子邮件字段下方的空间 -->
        <label for="email" class="block text-gray-700 text-sm font-bold mb-2">Email Address</label>
        <input id="email" type="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
      </div>
      <div class="mb-6"> <!-- 密码字段下方的更多空间 -->
        <label for="password" class="block text-gray-700 text-sm font-bold mb-2">Password</label>
        <input id="password" type="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
      </div>
      <button type="submit" class="w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline mt-2"> <!-- 按钮上方的空间 -->
        Sign In
      </button>
    </form>
  </div>

</body>
</html>

专家提示：外边距与间隔功能类

当您需要在一系列项目（如按钮、列表项或网格子元素）之间添加一致的间距时，为每个子元素应用外边距可能会很重复。一个更现代、更高效的方法是在父容器上使用间隔功能类（space-x-* 或 space-y-*）。

示例 2：为按钮组使用 space-x-*

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Space Between Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">

  <!-- 父 div 上的 space-x-4 类为除第一个子元素外的所有子元素添加了左外边距 -->
  <div class="flex p-4 bg-white rounded-lg shadow-lg space-x-4">
    <button class="bg-sky-500 text-white font-semibold px-4 py-2 rounded-md">Save</button>
    <button class="bg-gray-200 text-gray-800 font-semibold px-4 py-2 rounded-md">Cancel</button>
    <button class="bg-red-500 text-white font-semibold px-4 py-2 rounded-md">Delete</button>
  </div>

</body>
</html>

调试技巧

• 外边距不生效？ 外边距对 <span> 或 <a> 等内联元素不会有可见效果，除非您更改它们的 display 属性（例如，改为 inline-block 或 block）。
• 外边距折叠： 请注意 CSS 外边距折叠。相邻块级元素的垂直外边距可能会合并。这是标准的 CSS 行为，而不是 Tailwind 的问题。使用 Flexbox、Grid 或在顶部元素上使用单个 mb-* 有助于管理这种情况。
• 使用开发者工具检查： 浏览器的开发者工具是您最好的朋友。检查元素以查看正在应用的精确 CSS，并将外边距可视化为元素周围的有色框。