English 中文 العربية 日本語 Português

Tailwind CSS: Tailwind CSS 盒模型与显示：间距、尺寸与Display

1. Padding 间距系统

Padding（内边距）控制元素内容与边框之间的间距。Tailwind 提供 p-0 到 p-96 的完整间距系统，默认基于 4px 的倍数。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Padding 间距系统演示</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- 方向性 padding -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">方向性 Padding</h3>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="bg-blue-100 p-4 rounded text-center">
          <div class="bg-blue-500 text-white p-2 rounded">p-4</div>
          <span class="text-sm text-gray-600 mt-2 block">四边相同</span>
        </div>
        <div class="bg-green-100 px-6 py-4 rounded text-center">
          <div class="bg-green-500 text-white p-2 rounded">px-6 py-4</div>
          <span class="text-sm text-gray-600 mt-2 block">水平/垂直</span>
        </div>
        <div class="bg-purple-100 pt-4 pb-2 px-4 rounded text-center">
          <div class="bg-purple-500 text-white p-2 rounded">pt-4 pb-2</div>
          <span class="text-sm text-gray-600 mt-2 block">上下不同</span>
        </div>
        <div class="bg-orange-100 pl-8 pr-4 py-4 rounded text-center">
          <div class="bg-orange-500 text-white p-2 rounded">pl-8 pr-4</div>
          <span class="text-sm text-gray-600 mt-2 block">左右不同</span>
        </div>
      </div>
    </div>

    <!-- 常用 padding 值 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">常用 Padding 值</h3>
      <div class="space-y-4">
        <div class="flex items-center gap-4">
          <div class="bg-gray-200 p-1 w-32 text-center text-sm">p-1 (4px)</div>
          <div class="bg-gray-200 p-2 w-32 text-center text-sm">p-2 (8px)</div>
          <div class="bg-gray-200 p-3 w-32 text-center text-sm">p-3 (12px)</div>
          <div class="bg-gray-200 p-4 w-32 text-center text-sm">p-4 (16px)</div>
        </div>
        <div class="flex items-center gap-4">
          <div class="bg-gray-200 p-5 w-32 text-center text-sm">p-5 (20px)</div>
          <div class="bg-gray-200 p-6 w-32 text-center text-sm">p-6 (24px)</div>
          <div class="bg-gray-200 p-8 w-32 text-center text-sm">p-8 (32px)</div>
          <div class="bg-gray-200 p-10 w-32 text-center text-sm">p-10 (40px)</div>
        </div>
      </div>
    </div>

    <!-- 任意值 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">任意值 Padding</h3>
      <div class="flex gap-4">
        <div class="bg-blue-100 p-[15px] rounded text-center">p-[15px]</div>
        <div class="bg-green-100 p-[2rem] rounded text-center">p-[2rem]</div>
        <div class="bg-purple-100 p-[5%] rounded text-center">p-[5%]</div>
      </div>
    </div>
  </div>
</body>
</html>
逻辑代码 59 行（超过 40 行限制，仅展示）

Padding 方向类名对照：

类名 CSS 属性 说明
p-4 padding: 16px 四边相同
px-4 padding-left/right: 16px 水平方向
py-4 padding-top/bottom: 16px 垂直方向
pt-4 padding-top: 16px 顶部
pr-4 padding-right: 16px 右侧
pb-4 padding-bottom: 16px 底部
pl-4 padding-left: 16px 左侧

传统 CSS vs Tailwind 传统方式需要为每个元素设置具体的 padding 值，而 Tailwind 使用基于 4px 倍数的预设间距系统，保持设计一致性。

2. Margin 间距系统

Margin（外边距）控制元素与其他元素之间的间距，语法与 Padding 类似，额外支持自动居中。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Margin 间距系统演示</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- 基础 margin -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">基础 Margin</h3>
      <div class="bg-gray-200 p-4">
        <div class="bg-blue-500 text-white p-4 m-4 rounded">m-4 四边相同</div>
        <div class="bg-green-500 text-white p-4 mx-8 my-4 rounded">mx-8 my-4</div>
        <div class="bg-purple-500 text-white p-4 mt-8 mb-2 ml-4 mr-6 rounded">
          mt-8 mb-2 ml-4 mr-6
        </div>
      </div>
    </div>

    <!-- 自动居中 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">mx-auto 居中</h3>
      <div class="bg-gray-200 p-4">
        <div class="bg-blue-500 text-white p-4 w-64 mx-auto rounded text-center">
          mx-auto 居中
        </div>
      </div>
    </div>

    <!-- 负 margin -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">负值 Margin</h3>
      <div class="bg-gray-200 p-8">
        <div class="bg-red-500 text-white p-4 -mt-4 -ml-4 rounded">
          -mt-4 -ml-4 负边距
        </div>
      </div>
    </div>

    <!-- margin vs padding 对比 -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div class="bg-white rounded-lg shadow p-6">
        <h3 class="font-semibold mb-4">Padding（内边距）</h3>
        <div class="border-2 border-dashed border-blue-300">
          <div class="bg-blue-100 p-6">
            <div class="bg-blue-500 text-white p-4 rounded text-center">
              内容区域
            </div>
          </div>
        </div>
      </div>
      
      <div class="bg-white rounded-lg shadow p-6">
        <h3 class="font-semibold mb-4">Margin（外边距）</h3>
        <div class="border-2 border-dashed border-green-300 p-6">
          <div class="bg-green-500 text-white p-4 rounded text-center m-4">
            内容区域
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
逻辑代码 59 行（超过 40 行限制，仅展示）

传统 CSS vs Tailwind 传统方式需要为每个元素单独设置 margin 值，而 Tailwind 使用 mx-auto 实现居中、-mt-4 实现负边距，语法更直观。

💡 提示： 负 margin 使用 - 前缀，如 -m-4、-mt-2，常用于重叠布局和调整元素位置。

3. Width/Height 尺寸系统

Tailwind 提供丰富的尺寸类，包括预设尺寸和任意值，支持响应式设计。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Width/Height 尺寸系统演示</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- 固定宽度 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">固定宽度</h3>
      <div class="space-y-2">
        <div class="bg-blue-200 w-16 h-8 rounded">w-16</div>
        <div class="bg-blue-300 w-32 h-8 rounded">w-32</div>
        <div class="bg-blue-400 w-48 h-8 rounded text-white">w-48</div>
        <div class="bg-blue-500 w-64 h-8 rounded text-white">w-64</div>
        <div class="bg-blue-600 w-96 h-8 rounded text-white">w-96</div>
      </div>
    </div>

    <!-- 百分比宽度 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">百分比宽度</h3>
      <div class="space-y-2">
        <div class="bg-green-200 w-1/2 h-8 rounded">w-1/2 (50%)</div>
        <div class="bg-green-300 w-1/3 h-8 rounded">w-1/3 (33.33%)</div>
        <div class="bg-green-400 w-2/3 h-8 rounded text-white">w-2/3 (66.67%)</div>
        <div class="bg-green-500 w-1/4 h-8 rounded text-white">w-1/4 (25%)</div>
        <div class="bg-green-600 w-3/4 h-8 rounded text-white">w-3/4 (75%)</div>
      </div>
    </div>

    <!-- 特殊宽度 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">特殊宽度</h3>
      <div class="space-y-2">
        <div class="bg-purple-200 w-full h-8 rounded">w-full (100%)</div>
        <div class="bg-purple-300 w-screen h-8 rounded">w-screen (100vw)</div>
        <div class="bg-purple-400 w-min h-8 rounded text-white">w-min</div>
        <div class="bg-purple-500 w-max h-8 rounded text-white">w-max</div>
        <div class="bg-purple-600 w-fit h-8 rounded text-white">w-fit</div>
      </div>
    </div>

    <!-- 最小/最大宽度 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">最小/最大宽度</h3>
      <div class="space-y-2">
        <div class="bg-orange-200 min-w-[200px] w-32 h-8 rounded">
          min-w-[200px] w-32
        </div>
        <div class="bg-orange-300 max-w-xs h-8 rounded">
          max-w-xs
        </div>
      </div>
    </div>

    <!-- 高度示例 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">高度</h3>
      <div class="flex gap-4 items-end">
        <div class="bg-blue-500 w-16 h-16 rounded"></div>
        <div class="bg-blue-500 w-16 h-24 rounded"></div>
        <div class="bg-blue-500 w-16 h-32 rounded"></div>
        <div class="bg-blue-500 w-16 h-48 rounded"></div>
        <div class="bg-blue-500 w-16 h-64 rounded"></div>
      </div>
      <div class="mt-4 bg-gray-200 h-screen rounded">
        h-screen (100vh)
      </div>
    </div>
  </div>
</body>
</html>
逻辑代码 67 行（超过 40 行限制，仅展示）

常用尺寸对照：

类名 尺寸 像素值
w-1 0.25rem 4px
w-4 1rem 16px
w-8 2rem 32px
w-16 4rem 64px
w-32 8rem 128px
w-64 16rem 256px
w-96 24rem 384px

传统 CSS vs Tailwind 传统方式需要为每个元素设置具体的 width 和 height 值，而 Tailwind 使用基于 rem 的预设系统，自动响应字体大小变化。

4. Box Sizing

Box Sizing 控制元素尺寸的计算方式，影响 padding 和 border 是否包含在设定的宽高中。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Box Sizing 演示</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- box-border 演示 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">box-border（默认）</h3>
      <p class="text-gray-600 mb-4">padding 和 border 包含在设定的宽高内</p>
      <div class="bg-gray-200 p-4">
        <div class="box-border w-64 p-8 border-4 border-blue-500 bg-blue-100 rounded">
          <p class="text-center">w-64 + p-8 + border-4</p>
          <p class="text-center text-sm text-gray-600">总宽度 = 256px</p>
        </div>
      </div>
    </div>

    <!-- box-content 演示 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">box-content</h3>
      <p class="text-gray-600 mb-4">padding 和 border 在设定的宽高之外</p>
      <div class="bg-gray-200 p-4">
        <div class="box-content w-64 p-8 border-4 border-green-500 bg-green-100 rounded">
          <p class="text-center">w-64 + p-8 + border-4</p>
          <p class="text-center text-sm text-gray-600">总宽度 = 256 + 64 + 8 = 328px</p>
        </div>
      </div>
    </div>

    <!-- 对比图 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">对比效果</h3>
      <div class="grid grid-cols-2 gap-8">
        <div>
          <p class="text-center font-medium mb-2">box-border</p>
          <div class="bg-gray-200 p-4">
            <div class="box-border w-full h-32 p-4 border-4 border-blue-500 bg-blue-200 rounded flex items-center justify-center">
              内容区域较小
            </div>
          </div>
        </div>
        <div>
          <p class="text-center font-medium mb-2">box-content</p>
          <div class="bg-gray-200 p-4">
            <div class="box-content w-full h-32 p-4 border-4 border-green-500 bg-green-200 rounded flex items-center justify-center">
              内容区域较大
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
逻辑代码 54 行（超过 40 行限制，仅展示）

传统 CSS vs Tailwind 传统方式需要使用 box-sizing: border-box 属性，而 Tailwind 提供 box-border 和 box-content 两个简洁类名。

💡 提示： Tailwind 默认使用 box-border（继承自 CSS reset），这是现代网页开发的推荐做法。

5. Display 显示属性

Display 属性控制元素的显示方式，是布局的基础。Tailwind 提供完整的 display 工具类。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Display 显示属性演示</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- block 和 inline -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">block vs inline</h3>
      <div class="bg-gray-200 p-4 space-y-2">
        <span class="block bg-blue-200 p-2">span - block (独占一行)</span>
        <span class="block bg-blue-300 p-2">span - block (独占一行)</span>
      </div>
      <div class="bg-gray-200 p-4 mt-4">
        <span class="inline bg-green-200 p-2">span - inline</span>
        <span class="inline bg-green-300 p-2">span - inline</span>
        <span class="inline bg-green-400 p-2">span - inline</span>
      </div>
    </div>

    <!-- inline-block -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">inline-block</h3>
      <div class="bg-gray-200 p-4">
        <span class="inline-block bg-purple-200 p-4 m-2 rounded">inline-block</span>
        <span class="inline-block bg-purple-300 p-4 m-2 rounded">inline-block</span>
        <span class="inline-block bg-purple-400 p-4 m-2 rounded text-white">inline-block</span>
        <p class="text-sm text-gray-600 mt-2">兼具 inline 和 block 的特性</p>
      </div>
    </div>

    <!-- hidden -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">hidden（隐藏元素）</h3>
      <div class="bg-gray-200 p-4">
        <p>这段文字可见</p>
        <p class="hidden">这段文字被隐藏了（display: none）</p>
        <p>这段文字也可见</p>
      </div>
      <p class="text-sm text-gray-600 mt-4">
        提示：使用 hidden 或响应式前缀控制元素显示/隐藏
      </p>
    </div>

    <!-- flex 和 grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div class="bg-white rounded-lg shadow p-6">
        <h3 class="font-semibold mb-4">flex</h3>
        <div class="flex gap-2">
          <div class="bg-blue-200 p-4 rounded flex-1 text-center">1</div>
          <div class="bg-blue-300 p-4 rounded flex-1 text-center">2</div>
          <div class="bg-blue-400 p-4 rounded flex-1 text-center text-white">3</div>
        </div>
      </div>

      <div class="bg-white rounded-lg shadow p-6">
        <h3 class="font-semibold mb-4">grid</h3>
        <div class="grid grid-cols-3 gap-2">
          <div class="bg-green-200 p-4 rounded text-center">1</div>
          <div class="bg-green-300 p-4 rounded text-center">2</div>
          <div class="bg-green-400 p-4 rounded text-center text-white">3</div>
          <div class="bg-green-500 p-4 rounded text-center text-white">4</div>
          <div class="bg-green-600 p-4 rounded text-center text-white">5</div>
          <div class="bg-green-700 p-4 rounded text-center text-white">6</div>
        </div>
      </div>
    </div>

    <!-- 响应式显示 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">响应式显示/隐藏</h3>
      <div class="bg-gray-200 p-4">
        <p class="block md:hidden text-center text-red-500 font-medium">
          仅在小屏幕显示（block md:hidden）
        </p>
        <p class="hidden md:block lg:hidden text-center text-blue-500 font-medium">
          仅在中等屏幕显示（hidden md:block lg:hidden）
        </p>
        <p class="hidden lg:block text-center text-green-500 font-medium">
          仅在大屏幕显示（hidden lg:block）
        </p>
      </div>
    </div>
  </div>
</body>
</html>
逻辑代码 80 行（超过 40 行限制，仅展示）

Display 类名对照：

类名 CSS 值 说明
block display: block 块级元素
inline-block display: inline-block 行内块元素
inline display: inline 行内元素
flex display: flex 弹性布局
inline-flex display: inline-flex 行内弹性布局
grid display: grid 网格布局
inline-grid display: inline-grid 行内网格布局
hidden display: none 隐藏元素

传统 CSS vs Tailwind 传统方式需要在 CSS 中设置 display 属性，而 Tailwind 使用语义化的类名如 block、flex、grid，代码更易理解。

⚠️ 注意： hidden 会完全移除元素（display: none），如需保留元素空间可使用 invisible（visibility: hidden）。

❓ 常见问题

Q Tailwind 的间距系统基于什么单位？
A Tailwind 默认使用 4px 为基础单位。p-1 = 4px，p-2 = 8px，p-4 = 16px，以此类推。可以通过配置自定义间距比例。
Q mx-auto 为什么能实现水平居中？
A mx-auto 设置左右 margin 为 auto，当元素有固定宽度时，浏览器会自动计算两侧相等的 margin，实现水平居中。元素必须是 block 级别。
Q w-full 和 w-screen 有什么区别？
A w-full = 100% 父元素宽度，w-screen = 100vw（视口宽度）。视口宽度通常用于需要撑满整个屏幕的元素。
Q 什么时候使用 box-content？
A 当你需要让 padding 和 border 在设定的宽高之外显示时使用。大多数情况下使用默认的 box-border 更符合预期。

📖 小节

📝 作业

  1. ⭐ 创建一个卡片组件，使用 p-6 设置内边距，m-4 设置外边距，w-80 设置宽度，并通过 mx-auto 实现水平居中

  2. ⭐⭐ 创建一个响应式网格布局，使用 display: grid 和 display: flex 混合布局，在移动端单列、桌面端双列显示

  3. ⭐⭐⭐ 创建一个完整的页面布局，包含固定宽度的侧边栏（w-64）和自适应宽度的主内容区（flex-1），使用 box-border 确保尺寸计算正确

Web-Tutorial.com

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。

100%

🙏 帮我们做得更好

我们是刚上线的编程教程站，几个人的小团队，精力有限。页面虽经检查，难免还有疏漏——链接失效、排版错乱、内容有误、语言生硬……

如果您发现了，麻烦告诉我们，我们会在收到反馈后第一时间进行修复，再次感谢您的光临 🙏