1. 布局
  2. box-sizing(盒模型)

布局

box-sizing

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

ClassStyles
box-border
box-sizing: border-box
box-content
box-sizing: content-box

示例

包含边框和内边距

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

这意味着一个带有 2px 边框和四周 4px 内边距的 100px × 100px 元素,最终渲染尺寸仍为 100px × 100px,内部内容区域为 88px × 88px:

128px
128px
<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
<div class="box-content size-32 border-4 p-4 ...">  <!-- ... --></div>

响应式设计

Prefix a box-sizing utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

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

Learn more about using variants in the variants documentation.

Copyright © 2025 Tailwind Labs Inc.·Trademark Policy