Tailwind CSS 盒模型与间距

内边距与外边距

Tailwind 用 p 表示 padding，m 表示 margin，配合方向后缀使用。

内边距

<div class="p-4">四周内边距</div>
<div class="px-4">左右内边距</div>
<div class="py-4">上下内边距</div>
<div class="pt-2 pb-6">分别控制上下</div>

外边距

<div class="m-4">四周外边距</div>
<div class="mx-auto">左右自动（常用居中）</div>
<div class="mt-2 mb-6">分别控制上下</div>

间距数值是比例刻度，p-1 约 0.25rem，p-4 约 1rem，最大到 p-96。

尺寸

用 w- 和 h- 控制宽高。

宽高基础

<div class="w-32 h-32 bg-gray-200">固定 8rem 方块</div>
<div class="w-64 h-16 bg-gray-300">宽 16rem 高 4rem</div>

常用相对尺寸

<div class="w-full">占满父容器宽度</div>
<div class="max-w-md mx-auto">最大宽度并居中</div>
<div class="h-screen">占满视口高度</div>

边框与圆角

边框

<div class="border">默认 1px 灰边</div>
<div class="border-2">2px 边框</div>
<div class="border border-red-500">红色边框</div>
<div class="border-t-4 border-black">仅顶部粗边</div>

圆角

<div class="rounded">小圆角</div>
<div class="rounded-lg">大圆角</div>
<div class="rounded-full">胶囊/圆形</div>

box-sizing 默认值

Tailwind 默认把所有元素的 box-sizing 设为 border-box。也就是说，w-32 设置的宽度已经把边框和内边距算在里面，不会撑大元素。这点和传统 CSS 默认 content-box 不同，写布局时更省心。

元素之间的间距技巧

当有一组并列元素，不想给每个都写 margin，可以用这些工具类。

space- 兄弟间距

给父元素加 space-x-* 或 space-y-*，自动给子元素之间加间距：

<div class="space-x-4 flex">
  <span>一</span>
  <span>二</span>
  <span>三</span>
</div>

<div class="space-y-2">
  <p>段落一</p>
  <p>段落二</p>
</div>

divide- 分隔线

divide-* 在子元素之间画分隔线，常用于列表：

<div class="divide-y divide-gray-200">
  <p class="py-2">项目一</p>
  <p class="py-2">项目二</p>
  <p class="py-2">项目三</p>
</div>

可运行示例

<div class="max-w-md mx-auto p-6 space-y-4">
  <div class="border border-gray-300 rounded-lg p-4">
    带边框和圆角的卡片
  </div>
  <div class="bg-blue-500 text-white rounded-full px-4 py-2 w-32 text-center">
    圆角按钮
  </div>
  <div class="h-24 w-full bg-emerald-100 rounded"></div>
</div>