Tailwind CSS 间距 #

<!-- 所有方向 -->
<div class="p-4">四边内边距 1rem</div>
<div class="p-8">四边内边距 2rem</div>

<!-- 无内边距 -->
<div class="p-0">无内边距</div>

<!-- 左右内边距 -->
<div class="px-4">左右内边距 1rem</div>
<div class="px-8">左右内边距 2rem</div>

<!-- 上下内边距 -->
<div class="py-4">上下内边距 1rem</div>
<div class="py-8">上下内边距 2rem</div>

<!-- 上内边距 -->
<div class="pt-4">上内边距 1rem</div>

<!-- 右内边距 -->
<div class="pr-4">右内边距 1rem</div>

<!-- 下内边距 -->
<div class="pb-4">下内边距 1rem</div>

<!-- 左内边距 -->
<div class="pl-4">左内边距 1rem</div>

<!-- 行方向（左右，RTL 友好） -->
<div class="ps-4">起始方向内边距</div>
<div class="pe-4">结束方向内边距</div>

<!-- 块方向（上下） -->
<div class="bs-4">块起始内边距</div>
<div class="be-4">块结束内边距</div>

<!-- 所有方向 -->
<div class="m-4">四边外边距 1rem</div>
<div class="m-8">四边外边距 2rem</div>

<!-- 无外边距 -->
<div class="m-0">无外边距</div>

<!-- 左右外边距 -->
<div class="mx-4">左右外边距 1rem</div>
<div class="mx-auto">水平居中</div>

<!-- 上下外边距 -->
<div class="my-4">上下外边距 1rem</div>

<!-- 上外边距 -->
<div class="mt-4">上外边距 1rem</div>

<!-- 右外边距 -->
<div class="mr-4">右外边距 1rem</div>

<!-- 下外边距 -->
<div class="mb-4">下外边距 1rem</div>

<!-- 左外边距 -->
<div class="ml-4">左外边距 1rem</div>

<!-- 负值外边距 -->
<div class="-mt-4">向上偏移 1rem</div>
<div class="-mr-4">向右偏移 1rem</div>
<div class="-mb-4">向下偏移 1rem</div>
<div class="-ml-4">向左偏移 1rem</div>
<div class="-mx-4">左右负外边距</div>
<div class="-my-4">上下负外边距</div>
<div class="-m-4">四边负外边距</div>

<!-- 水平居中 -->
<div class="mx-auto w-64">水平居中</div>

<!-- 推向一侧 -->
<div class="ml-auto">推向右侧</div>
<div class="mr-auto">推向左侧</div>

<!-- 垂直居中（需要 flex） -->
<div class="my-auto">垂直居中</div>

<!-- 行方向（RTL 友好） -->
<div class="ms-4">起始方向外边距</div>
<div class="me-4">结束方向外边距</div>
<div class="ms-auto">推向结束方向</div>

<!-- 块方向 -->
<div class="mt-4">块起始外边距</div>
<div class="mb-4">块结束外边距</div>

<!-- 所有方向间隙 -->
<div class="flex gap-4">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>

<div class="grid grid-cols-3 gap-4">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>

<!-- 行之间间隙 -->
<div class="grid grid-cols-2 gap-x-4">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
  <div>项目 4</div>
</div>

<!-- 列之间间隙 -->
<div class="grid grid-cols-2 gap-y-4">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
  <div>项目 4</div>
</div>

<!-- 子元素之间水平间距 -->
<div class="flex space-x-4">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>

<!-- 子元素之间垂直间距 -->
<div class="flex flex-col space-y-4">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>

<!-- 反向布局时使用 space-x-reverse -->
<div class="flex flex-row-reverse space-x-4 space-x-reverse">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>

<!-- space-between：使用 margin -->
<div class="flex space-x-4">
  <div>项目 1</div>  <!-- mr-4 -->
  <div>项目 2</div>  <!-- mr-4 -->
  <div>项目 3</div>  <!-- 无 margin -->
</div>

<!-- gap：使用 gap 属性 -->
<div class="flex gap-4">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>

<div class="divide-x divide-gray-200">
  <div class="px-4">项目 1</div>
  <div class="px-4">项目 2</div>
  <div class="px-4">项目 3</div>
</div>

<div class="divide-y divide-gray-200">
  <div class="py-4">项目 1</div>
  <div class="py-4">项目 2</div>
  <div class="py-4">项目 3</div>
</div>

<!-- 实线（默认） -->
<div class="divide-y divide-solid divide-gray-200">

<!-- 虚线 -->
<div class="divide-y divide-dashed divide-gray-200">

<!-- 点线 -->
<div class="divide-y divide-dotted divide-gray-200">

<!-- 无分割线 -->
<div class="divide-y divide-none">

<div class="divide-y divide-2 divide-gray-200">
<div class="divide-y divide-4 divide-gray-200">

<!-- 任意内边距 -->
<div class="p-[13px]">自定义内边距</div>
<div class="px-[20px]">自定义水平内边距</div>

<!-- 任意外边距 -->
<div class="m-[10px]">自定义外边距</div>
<div class="mt-[2em]">自定义上外边距</div>

<!-- 任意间隙 -->
<div class="gap-[15px]">自定义间隙</div>

<div class="p-6 bg-white rounded-lg shadow-md">
  <h3 class="text-lg font-semibold mb-2">卡片标题</h3>
  <p class="text-gray-600 mb-4">卡片内容描述</p>
  <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
    操作按钮
  </button>
</div>

<nav class="px-6 py-4 bg-white shadow">
  <div class="flex items-center justify-between max-w-7xl mx-auto">
    <span class="text-xl font-bold">Logo</span>
    <div class="flex items-center space-x-6">
      <a href="#" class="hover:text-blue-500">首页</a>
      <a href="#" class="hover:text-blue-500">关于</a>
      <a href="#" class="hover:text-blue-500">联系</a>
    </div>
  </div>
</nav>

<ul class="space-y-3">
  <li class="p-4 bg-gray-50 rounded">列表项 1</li>
  <li class="p-4 bg-gray-50 rounded">列表项 2</li>
  <li class="p-4 bg-gray-50 rounded">列表项 3</li>
</ul>

<!-- 或使用分割线 -->
<ul class="divide-y divide-gray-200">
  <li class="py-4">列表项 1</li>
  <li class="py-4">列表项 2</li>
  <li class="py-4">列表项 3</li>
</ul>

<form class="space-y-4">
  <div>
    <label class="block mb-1 text-sm font-medium">用户名</label>
    <input class="w-full px-4 py-2 border rounded-lg">
  </div>
  <div>
    <label class="block mb-1 text-sm font-medium">密码</label>
    <input type="password" class="w-full px-4 py-2 border rounded-lg">
  </div>
  <button class="w-full py-2 bg-blue-500 text-white rounded-lg">
    登录
  </button>
</form>

<div class="min-h-screen flex flex-col">
  <header class="py-4 px-6 bg-white shadow">
    头部
  </header>
  
  <main class="flex-1 py-8 px-6">
    <div class="max-w-7xl mx-auto">
      主内容
    </div>
  </main>
  
  <footer class="py-6 px-6 bg-gray-100">
    底部
  </footer>
</div>

<div class="relative">
  <div class="bg-blue-500 p-8">
    背景元素
  </div>
  <div class="bg-white p-6 shadow-lg -mt-4 mx-4 rounded-lg">
    重叠卡片
  </div>
</div>