---
title: Sizing
description: Style properties for controlling the size of an element.
---

Style properties for controlling the size of an element.

Alongside `sizes` tokens, every sizing property accepts `auto`, `screen` and fractional values:

- Halves: `1/2`
- Thirds: `1/3` to `2/3`
- Fourths: `1/4` to `3/4`
- Fifths: `1/5` to `4/5`
- Sixths: `1/6` to `5/6`
- Twelfths: `1/12` to `11/12` — width only

## Width

```jsx
<div className={css({ width: '5' })} />
<div className={css({ w: '1/2' })} /> // shorthand, fractional
```

| Prop               | CSS Property | Token Category |
| ------------------ | ------------ | -------------- |
| `w`, `width`       | `width`      | `sizes`        |
| `maxW`, `maxWidth` | `max-width`  | `sizes`        |
| `minW`, `minWidth` | `min-width`  | `sizes`        |

## Height

Height properties also accept the relative units `dvh`, `svh` and `lvh`.

```jsx
<div className={css({ height: '5' })} />
<div className={css({ h: 'dvh' })} /> // shorthand, relative unit
```

| Prop                | CSS Property | Token Category |
| ------------------- | ------------ | -------------- |
| `h`, `height`       | `height`     | `sizes`        |
| `maxH`, `maxHeight` | `max-height` | `sizes`        |
| `minH`, `minHeight` | `min-height` | `sizes`        |

## Size

Use the `boxSize` property to set the width and height of an element.

```jsx
<div className={css({ boxSize: '24' })} />
```

| Prop      | CSS Property    | Token Category |
| --------- | --------------- | -------------- |
| `boxSize` | `width, height` | `sizes`        |
