# padding

> Applies logical padding using the spacing scale or a raw CSS length.

```ts
import { p } from "@sdxc/u/size";
```

Applies logical padding using the spacing scale or a raw CSS length. One
value applies all sides; two values map to block then inline; four values
map to block-start, inline-end, block-end, and inline-start.

- [MDN: logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values)

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.p(4)` | `css({ padding: "calc(var(--ui-spacing, 0.25rem) * 4)" })` |
| `u.p(1, 2, 3, 4)` | `css({ paddingBlockStart: "...", paddingInlineEnd: "...", paddingBlockEnd: "...", paddingInlineStart: "..." })` |

## Examples

### Basic example

Use `p(n)` with a step of the spacing scale, like `p(4)` or `p(8)`, to pad every side of an element:

```tsx
<div mix={[p(8), ...]}>
	<div mix={[...]}>p(8)</div>
</div>
```

### Block and inline padding

Pass two values to pad the block axis and then the inline axis, like `p(4, 10)`:

```tsx
<div mix={[p(4, 10), ...]}>
	<div mix={[...]}>p(4, 10)</div>
</div>
```

### Each side

Pass four values to pad the block-start, inline-end, block-end and inline-start edges in that order, like `p(2, 8, 6, 4)`:

```tsx
<div mix={[p(2, 8, 6, 4), ...]}>
	<div mix={[...]}>p(2, 8, 6, 4)</div>
</div>
```

### Arbitrary values

Pass a string to use any CSS length instead of a step of the scale, like `p("1.25rem")` or `p("2em", "5%")`:

```tsx
<div mix={[...]}>
	<div mix={[p("1.25rem"), ...]}>
		<div mix={[...]}>p("1.25rem")</div>
	</div>
	<div mix={[p("2em", "5%"), ...]}>
		<div mix={[...]}>p("2em", "5%")</div>
	</div>
</div>
```

## Using a custom value

Every scale argument also takes a raw CSS value, which passes through untouched.

```ts
u.p("2.75rem")
```

## Applying on a state

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

```ts
u.hover(u.p(4))
```

## Responsive design

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

```ts
u.at("md", u.p(4))
```

## Customizing your theme

### Customizing spacing

Every numeric step multiplies `--ui-spacing`, so redefining it rescales every spacing and sizing utility at once:

```css
:root {
	--ui-spacing: 0.25rem;
}
```

Every call that names the step now reads the new value:

```ts
p(4)
```

## Signature

```ts
u.p(...values: SpacingValue[])
```