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 在我們的預設樣式中，將此設為所有元素的預設值。

排除邊框和內距

使用 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>

響應式設計

前綴a box-sizing 工具類別 使用像 md: 這樣的斷點變體，僅在中等 螢幕尺寸及以上套用工具類別

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

在變體文件中深入了解如何使用變體。