Layout
box-sizing
Setting how the total width and height of an element is calculated.
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 when an element's declared width and height should include its padding and border.
<div class="box-border w:40x p:4x b:1px|solid|gray-20"> 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 apply only to the content area and padding or border can add to the rendered size.
<div class="box-content w:40x p:4x b:1px|solid|gray-20"> Content-box</div>Prefer consistency inside components
Most UI components should use one sizing model consistently. Switch box sizing only at component boundaries or for compatibility with third-party content.
<div class="box-border"> <iframe class="box-content"></iframe></div>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="box-border box-content@sm box-border@print">...</div>