# 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).

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

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).

## 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:

```tsx
<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:

```tsx
<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.

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

## Responsive design

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

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

## Signature

```ts
u.boxSizing(value: BoxSizingValue)
```