box-sizing
Choose whether declared dimensions include padding and borders.
Overview
| Class | Declarations |
|---|---|
box-content | box-sizing: content-box;
|
box-border | box-sizing: border-box;
|
box-sizing:<value> | box-sizing: <value>;
|
Examples
Include border and padding in size
Use box-border to include padding and border within the declared width and height. In this example, the outer width stays at 10rem (160px with a 16px root font size).
<div class="w:10rem p-md b:1px|solid|var(--color-gray-20) box-border"> Border-box</div>Generated CSS
@layer utilities { .box-border { box-sizing: border-box }}Size the content box only
Use box-content when the declared size should describe the content alone. Here, 10rem of content, two 16px paddings and two 1px borders produce an outer width of 194px.
<div class="w:10rem p-md b:1px|solid|var(--color-gray-20) box-content"> Content-box</div>Prefer consistency inside components
Keep one sizing model across the parts of a component so its dimensions remain predictable. box-sizing is not inherited automatically; applying it to a parent does not set it on every child.
<div class="w:10rem p-md b:1px|solid|var(--color-gray-20) box-border">Border-box</div><div class="w:10rem p-md b:1px|solid|var(--color-gray-20) box-content">Content-box</div>Apply conditionally
The same width can produce a different outer size when a condition switches its box model. Resize this preview past sm to compare box-border and box-content; the padding and border stay constant. See conditions.
<div class="w:10rem p-md b:1px|solid|var(--color-gray-20) box-border box-content@sm">Content</div>