# padding-bottom

> Pads the given physical `side` by its `env(safe-area-inset-{side})` value, falling back to `fallback` (`"0px"` by default) on platforms with no safe area to avoid.

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

Pads the given physical `side` by its `env(safe-area-inset-{side})` value,
falling back to `fallback` (`"0px"` by default) on platforms with no safe
area to avoid. Sets only that one physical padding property.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.safeAreaPadding("bottom")` | `css({ paddingBottom: "env(safe-area-inset-bottom, 0px)" })` |
| `u.safeAreaPadding("top", "1rem")` | `css({ paddingTop: "env(safe-area-inset-top, 1rem)" })` |

## Examples

### Basic example

Use `safeAreaPadding("bottom")` to keep a bottom bar clear of a phone's home indicator. It needs `viewport-fit=cover` in the viewport meta tag, and adds nothing on a screen without a safe area:

```tsx
<div mix={[is(72), ...]}>
	<p mix={[p(4), ...]}>Inbox</p>
	<nav mix={[hstack({ justify: "around" }), pbs(3), safeAreaPadding("bottom"), ...]}>
		<span>Home</span>
		<span>Search</span>
		<span>Profile</span>
	</nav>
</div>
```

### Fallback value

Pass a second value, like `safeAreaPadding("top", "0.75rem")`, for the padding to use in a browser that defines no safe-area inset:

```tsx
<div mix={[is(72), ...]}>
	<header mix={[pbe(3), pi(4), safeAreaPadding("top", "0.75rem"), ...]}>
		Messages
	</header>
	<p mix={[p(4), ...]}>3 unread</p>
</div>
```

## Applying on a state

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

```ts
u.hover(u.safeAreaPadding("bottom"))
```

## Responsive design

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

```ts
u.at("md", u.safeAreaPadding("bottom"))
```

## Signature

```ts
u.safeAreaPadding(side: SafeAreaSide, fallback?: string)
```