box-sizing

範例（Examples）

包含邊框和內距（Including borders and padding）

使用 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 基礎樣式中將此設為所有元素的預設值。

排除邊框和內距（Excluding borders and padding）

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

響應式設計（Responsive design）

在 box-sizing 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：

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

在變體文件中了解更多關於使用變體的資訊。