Tailwind CSS - 边框间距

在 Tailwind CSS 中控制边框间距

Tailwind CSS 提供了 border-spacing-* 工具类来控制表格单元格边框之间的间距。重要提示： 这些工具类仅对 border-collapse 属性设置为 separate（可以通过 border-separate 工具类实现）的表格有效。

边框间距工具类

你可以同时控制 x 轴、y 轴或两者的边框间距。其语法遵循一致的模式：

border-spacing-x-{amount}：控制水平间距。
border-spacing-y-{amount}：控制垂直间距。
border-spacing-{amount}：同时控制水平和垂直间距。

{amount} 对应于 Tailwind 的默认间距比例（例如 0、px、0.5、1、1.5、2，直至 96）。

Class	CSS Properties
border-spacing-x-0	border-spacing: 0px var(—tw-border-spacing-y);
border-spacing-y-4	border-spacing: var(—tw-border-spacing-x) 1rem;
border-spacing-px	border-spacing: 1px 1px;
border-spacing-2	border-spacing: 0.5rem 0.5rem;

情境提醒

请记住，对于表格单元格以外的元素间距（如 Flexbox 或 Grid 项目），你应该使用 gap-* 工具类。要控制元素边框外部的间距，请使用 margin (m-*)，而对于边框内部的间距，则使用 padding (p-*)。

实际示例

示例 1：统一的边框间距

此示例在 x 轴和 y 轴上应用了相同的间距，以实现整洁、统一的外观。border-separate 类对于 border-spacing-* 工具类的生效至关重要。

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdn.tailwindcss.com"></script>
  <title>统一的边框间距</title>
</head>
<body class="p-4 md:p-8 bg-slate-50">
  <h1 class="text-2xl font-bold mb-4">产品库存</h1>
  <table class="w-full border-separate border-spacing-2 text-left">
    <thead>
      <tr>
        <th class="p-3 bg-slate-200 text-slate-800 rounded-lg">产品</th>
        <th class="p-3 bg-slate-200 text-slate-800 rounded-lg">库存单位 (SKU)</th>
        <th class="p-3 bg-slate-200 text-slate-800 rounded-lg">库存</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="p-3 bg-white text-slate-700 rounded-lg shadow-sm">笔记本电脑</td>
        <td class="p-3 bg-white text-slate-700 rounded-lg shadow-sm">LP-101</td>
        <td class="p-3 bg-white text-slate-700 rounded-lg shadow-sm">42</td>
      </tr>
      <tr>
        <td class="p-3 bg-white text-slate-700 rounded-lg shadow-sm">键盘</td>
        <td class="p-3 bg-white text-slate-700 rounded-lg shadow-sm">KB-203</td>
        <td class="p-3 bg-white text-slate-700 rounded-lg shadow-sm">110</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

示例 2：轴向特定间距

这里，我们使用 border-spacing-x-* 和 border-spacing-y-* 为水平轴和垂直轴应用不同的间距值，从而实现更精确的布局控制。

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdn.tailwindcss.com"></script>
  <title>轴向特定边框间距</title>
</head>
<body class="p-4 md:p-8 bg-slate-50">
  <h1 class="text-2xl font-bold mb-4">用户列表</h1>
  <!-- 水平间距大于垂直间距 -->
  <table class="w-full border-separate border-spacing-x-4 border-spacing-y-2 text-left">
    <thead>
      <tr>
        <th class="p-3 bg-blue-100 text-blue-900 rounded-md">姓名</th>
        <th class="p-3 bg-blue-100 text-blue-900 rounded-md">邮箱</th>
        <th class="p-3 bg-blue-100 text-blue-900 rounded-md">角色</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="p-3 bg-white border border-blue-200 rounded-md">Alice Johnson</td>
        <td class="p-3 bg-white border border-blue-200 rounded-md">alice@example.com</td>
        <td class="p-3 bg-white border border-blue-200 rounded-md">管理员</td>
      </tr>
      <tr>
        <td class="p-3 bg-white border border-blue-200 rounded-md">Bob Williams</td>
        <td class="p-3 bg-white border border-blue-200 rounded-md">bob@example.com</td>
        <td class="p-3 bg-white border border-blue-200 rounded-md">用户</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

任意值

为了精确到像素的调整，你可以使用任意值：<table class="border-separate border-spacing-x-[10px] border-spacing-y-[15px]">...</table>