盒模型計算方式box-sizing

Setting how the total width and height of an element is calculated.

Overview

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>

@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>