Box Sizing

Control how width and height are calculated

Syntax

layout="box:[value]"

Values

Value	CSS Output	Description
border	box-sizing: border-box	Include padding and border in size
content	box-sizing: content-box	Exclude padding and border

Examples

<div layout="box:border">Border box</div>

Preview

Border Box

layout="box:border" - Padding and border included in width

box:border
100px

View Code

<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <div layout="box:border" space="p:medium" visual="bg:primary text:white border:4 border:white rounded:small" style="width: 100px;">box:border<br>100px</div>
</div>