box-sizing

快速参考

示例

包含边框和内边距

使用 box-border 工具类将元素的 box-sizing 设置为 border-box，告诉浏览器在你指定元素的高度或宽度时，将元素的边框和内边距包含在内。

这意味着一个 100px × 100px 的元素，如果四周都有 2px 的边框和 4px 的内边距，最终渲染尺寸仍然是 100px × 100px，但其内部内容区域的尺寸将是 88px × 88px：

<div class="box-border size-32 border-4 p-4 ...">
  <!-- ... -->
</div>

Tailwind 在我们的 preflight 基础样式 中将此设置为所有元素的默认值。

排除边框和内边距

使用 box-content 工具类将元素的 box-sizing 设置为 content-box，告诉浏览器在元素指定的宽度或高度之上添加边框和内边距。

这意味着一个 100px × 100px 的元素，如果四周都有 2px 的边框和 4px 的内边距，最终渲染尺寸将是 112px × 112px，而其内部内容区域的尺寸是 100px × 100px：

<div class="box-content size-32 border-4 p-4 ...">
  <!-- ... -->
</div>

响应式设计

为 box-sizing 工具类添加断点变体的前缀（如 md:），以便仅在中等屏幕尺寸及以上应用该工具类：

<div class="box-content md:box-border ...">
  <!-- ... -->
</div>

在 变体文档 中了解更多关于使用变体的信息。