box-sizing

用于控制浏览器如何计算元素总尺寸的工具类。

快速参考

类	属性
box-border	box-sizing: border-box;
box-content	box-sizing: content-box;

示例

包含边框和内边距

使用 box-border 工具类将元素的 box-sizing 设为 border-box，让浏览器在你指定高度或宽度时把元素的边框和内边距计算在内。

这意味着一个 100px × 100px、四周各有 2px 边框和 4px 内边距的元素会渲染为 100px × 100px，内部内容区域为 88px × 88px：

128px

128px

<!-- [!code classes:box-border] -->
<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：

128px

128px

<!-- [!code classes:box-content] -->
<div class="box-content size-32 border-4 p-4 ...">
  <!-- ... -->
</div>

响应式设计

使用 md: 等断点变体作为 box-sizing 工具类的前缀，即可仅在中等及以上屏幕尺寸下应用该工具类：

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

了解如何使用变体，请参阅变体文档。