Tailwind CSS 间距完整参考

Tailwind CSS是一个现代化的CSS框架，在设计模式、响应式布局和工具性CSS细节方面拥有独特的功能。其中一项最重要的特性就是其间距系统。在本篇文章中，我们将完整介绍Tailwind CSS的间距类和用法，以帮助开发者更好地使用之。

间距的设计原则

在Tailwind CSS 中，间距具有以下设计原则：

• 间距应该是响应式的。这意味着在不同的屏幕尺寸和设备上，相同的间距应该被显示为不同的值。
• 间距应该基于 4 的倍数。这意味着间距将始终保持一致，而且容易计算。
• 间距应该支持所有常见的间距需求，包括内部间距、外部间距和负间距。

根据这些原则，Tailwind CSS 将间距分为外部间距和内部间距。接下来，我们将介绍这两类间距及其对应的CSS类。

外部间距

外部间距用于控制元素与其周围元素之间的间距，包括上下左右四个方向。

外部间距类

Tailwind CSS 提供以下外部间距类：

• m - margin
• mt - margin-top
• mb - margin-bottom
• ml - margin-left
• mr - margin-right
• mx - margin-left and margin-right
• my - margin-top and margin-bottom

以上类名后跟一个数字，表示间距大小。下表列出了默认的间距大小及其对应的 CSS 值：

| 数字 | CSS 值 | | --- | --- | | 0 | 0 | | 1 | 0.25rem | | 2 | 0.5rem | | 3 | 0.75rem | | 4 | 1rem | | 5 | 1.25rem | | 6 | 1.5rem | | 8 | 2rem | | 10 | 2.5rem | | 12 | 3rem | | 16 | 4rem | | 20 | 5rem | | 24 | 6rem | | 32 | 8rem | | 40 | 10rem | | 48 | 12rem | | 56 | 14rem | | 64 | 16rem |

外部间距示例

以下示例展示了如何使用外部间距类创建一些常见的布局：

<div class="m-4">
  <p>这是一些文本。</p>
</div>

<div class="mx-auto max-w-sm">
  <img class="w-full rounded-lg" src="http://placekitten.com/640/360" alt="A kitten">
  <p class="mt-2 text-center text-gray-600">一只小猫</p>
</div>

<div class="flex justify-between">
  <button class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700">保存</button>
  <button class="px-4 py-2 font-bold text-white bg-red-500 rounded hover:bg-red-700">取消</button>
</div>

以上代码将创建一个带有内部文本、图像和按钮的区域，并在这些元素之间创建了外部间距。其中的 mx-auto 类可用于将元素水平居中对齐。

内部间距

内部间距用于控制元素内部元素之间的间距，如段落中的行距或以间隔方式排列的列表项之间的间距。

内部间距类

Tailwind CSS 提供以下内部间距类：

• p - padding
• pt - padding-top
• pb - padding-bottom
• pl - padding-left
• pr - padding-right
• px - padding-left and padding-right
• py - padding-top and padding-bottom

以下类也会在内部间距时很有用：

• space-x-* - 将元素之间的水平间隔间距设置为指定大小
• space-y-* - 将元素之间的垂直间隔间距设置为指定大小

内部间距示例

以下示例展示了如何使用内部间距类，以及如何使用 space-y-* 来创建垂直间距：

<div class="p-4">
  <h1 class="text-2xl font-bold">我的博客</h1>
  <p class="text-gray-500">欢迎来访问我的博客。</p>
</div>

<div class="space-y-4">
  <p>这是一个段落，其中包含一些文本。</p>
  <ul class="list-disc list-inside">
    <li>列表项 1</li>
    <li>列表项 2</li>
    <li>列表项 3</li>
  </ul>
</div>

<div class="flex space-x-4">
  <img class="w-1/3 rounded-lg" src="http://placekitten.com/640/360" alt="A kitten">
  <img class="w-1/3 rounded-lg" src="http://placekitten.com/640/360" alt="A kitten">
  <img class="w-1/3 rounded-lg" src="http://placekitten.com/640/360" alt="A kitten">
</div>

以上代码展示了如何在文本、列表和图像之间应用内部间距和水平间距。

负间距

Tailwind CSS 还提供了负数的间距类，可以将元素移动到其周围的区域内或之外。

负间距示例

以下示例展示了如何使用带有负距离的外部和内部间距，创建一些视觉效果：

<div class="-mx-4">
  <img class="w-full rounded-lg" src="http://placekitten.com/640/360" alt="A kitten">
  <div class="px-4 py-2 bg-gray-300">
    <p>这是一些内部文本，不在图像周围。</p>
  </div>
</div>

<div class="p-4 bg-gray-300">
  <p>这是章节的文本，不带有外部边距。</p>
  <div class="mt-8 -mx-4 bg-white rounded-lg shadow-lg">
    <img class="w-full" src="http://placekitten.com/640/360" alt="A kitten">
    <div class="px-4 py-2 bg-gray-300">
      <p>这是一些内部文本，紧贴着图像。</p>
    </div>
  </div>
</div>

以上示例显示如何给一个 <div> 应用负距离从而使其扩展为其父级的全部宽度，以及如何在元素内部使用负距离。