[ @sdxc/u/layout ]

box-sizing

Applies box-sizing, controlling whether width/height (and the logical inline-size/block-size pair) span padding and border ("border-box") or the content area alone ("content-box", the CSS default).

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

import { boxSizing } from "@sdxc/u/layout";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.boxSizing("border-box")`	`css({ boxSizing: "border-box" })`
`u.boxSizing("content-box")`	`css({ boxSizing: "content-box" })`

Examples

Including borders and padding

Use boxSizing("border-box") to make the size you set include the element's border and padding. This box is 128px wide:

boxSizing("border-box")

<div mix={[...]}>
	<div
		mix={[
			boxSizing("border-box"),
			is(32),
			bs(32),
			p(4),
			border({ color: "brand.strong", width: 4, style: "solid" }),
			...,
		]}
	>
		<div mix={[bs("full"), ...]} />
	</div>
	<span mix={[...]}>boxSizing("border-box")</span>
</div>

Excluding borders and padding

Use boxSizing("content-box") to make the size you set cover only the content, adding border and padding on top. This box is 168px wide:

boxSizing("content-box")

<div mix={[...]}>
	<div
		mix={[
			boxSizing("content-box"),
			is(32),
			bs(32),
			p(4),
			border({ color: "brand.strong", width: 4, style: "solid" }),
			...,
		]}
	>
		<div mix={[bs("full"), ...]} />
	</div>
	<span mix={[...]}>boxSizing("content-box")</span>
</div>

Applying on a state

Wrap the call in a state utility to scope it to one selector.

u.hover(u.boxSizing("border-box"))

Responsive design

Wrap the call in a container query to scope it to one width.

u.at("md", u.boxSizing("border-box"))

Signature

u.boxSizing(value: BoxSizingValue)