盒子大小

Class	Properties
box-border	box-sizing: border-box;
box-content	box-sizing: content-box;

Class

Properties

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。

Tailwind 将其作为我们 preflight base styles 中所有元素的默认值。

128px

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

使用 box-content 实用程序将元素的 box-sizing 设置为 content-box，告诉浏览器在元素指定的宽度或高度上添加边框和填充。

这意味着一个 100px × 100px 元素，如果其所有边都有 2px 边框和 4px 填充，则实际上将被呈现为 112px × 112px，其内部内容区域为 100px × 100px。

128px

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

Tailwind 允许您使用变体修饰符有条件地在不同状态下应用实用程序类。例如，使用 hover:box-content 来仅在 hover应用 box-content.

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

详细了解, 请参考 Hover, Focus, & Other States 文档.

您还可以使用变体修饰符来定位媒体查询，例如响应式断点、暗模式、首选减少运动等。例如, 使用 md:box-content 来应用 box-content 程序，适用于中等屏幕尺寸及以上。

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