# Box

A utility component for working with spacing.

## Features

- Shorthand margin and padding CSS declarations.

- Adheres to our [spacing tokens](/foundations/spacing/spacing.overview).

## Basic usage

First, import the component.

```tsx
import {Box} from '@pleo-io/telescope'
```

Then use it, like so:

```tsx
<div css={{border: `1px dashed ${tokens.colorBorderStaticLoud}`}}>
    <Box p={10} m={10} css={{background: tokens.colorBackgroundStaticInverse}}>
        <div css={{width: 40, height: 40, border: `1px dashed ${tokens.colorBorderStaticLoud}`}} />
    </Box>
</div>
```

## API reference

The component accepts the following props.

#### `m`

Type: `0 | "auto" | SpacingValues | undefined`

##### Allowed values

- `0`
- `"auto"`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Margin on top, left, bottom and right

#### `margin`

Type: `0 | SpacingValues | undefined`

##### Allowed values

- `0`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Margin on top, left, bottom and right

#### `marginBottom`

Type: `0 | SpacingValues | undefined`

##### Allowed values

- `0`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Margin on bottom

#### `marginLeft`

Type: `0 | "auto" | SpacingValues | undefined`

##### Allowed values

- `0`
- `"auto"`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Margin on left

#### `marginRight`

Type: `0 | "auto" | SpacingValues | undefined`

##### Allowed values

- `0`
- `"auto"`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Margin on right

#### `marginTop`

Type: `0 | SpacingValues | undefined`

##### Allowed values

- `0`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Margin on top

#### `marginX`

Type: `0 | "auto" | SpacingValues | undefined`

##### Allowed values

- `0`
- `"auto"`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Margin on left and right

#### `marginY`

Type: `0 | "auto" | SpacingValues | undefined`

##### Allowed values

- `0`
- `"auto"`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Margin on top and bottom

#### `mb`

Type: `0 | SpacingValues | undefined`

##### Allowed values

- `0`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Margin on bottom

#### `ml`

Type: `0 | "auto" | SpacingValues | undefined`

##### Allowed values

- `0`
- `"auto"`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Margin on left

#### `mr`

Type: `0 | "auto" | SpacingValues | undefined`

##### Allowed values

- `0`
- `"auto"`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Margin on right

#### `mt`

Type: `0 | SpacingValues | undefined`

##### Allowed values

- `0`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Margin on top

#### `mx`

Type: `0 | "auto" | SpacingValues | undefined`

##### Allowed values

- `0`
- `"auto"`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Margin on left and right

#### `my`

Type: `0 | "auto" | SpacingValues | undefined`

##### Allowed values

- `0`
- `"auto"`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Margin on top and bottom

#### `p`

Type: `0 | SpacingValues | undefined`

##### Allowed values

- `0`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Padding on top, left, bottom and right

#### `padding`

Type: `0 | SpacingValues | undefined`

##### Allowed values

- `0`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Padding on top, left, bottom and right

#### `paddingBottom`

Type: `0 | SpacingValues | undefined`

##### Allowed values

- `0`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Padding on bottom

#### `paddingLeft`

Type: `0 | SpacingValues | undefined`

##### Allowed values

- `0`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Padding on left

#### `paddingRight`

Type: `0 | SpacingValues | undefined`

##### Allowed values

- `0`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Padding on right

#### `paddingTop`

Type: `0 | SpacingValues | undefined`

##### Allowed values

- `0`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Padding on top

#### `paddingX`

Type: `0 | SpacingValues | undefined`

##### Allowed values

- `0`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Padding on left and right

#### `paddingY`

Type: `0 | SpacingValues | undefined`

##### Allowed values

- `0`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Padding on top and bottom

#### `pb`

Type: `0 | SpacingValues | undefined`

##### Allowed values

- `0`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Padding on bottom

#### `pl`

Type: `0 | SpacingValues | undefined`

##### Allowed values

- `0`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Padding on left

#### `pr`

Type: `0 | SpacingValues | undefined`

##### Allowed values

- `0`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Padding on right

#### `pt`

Type: `0 | SpacingValues | undefined`

##### Allowed values

- `0`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Padding on top

#### `px`

Type: `0 | SpacingValues | undefined`

##### Allowed values

- `0`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Padding on left and right

#### `py`

Type: `0 | SpacingValues | undefined`

##### Allowed values

- `0`
- `2`
- `4`
- `16`
- `20`
- `24`
- `48`
- `40`
- `8`
- `12`
- `6`
- `10`
- `32`
- `14`
- `18`
- `28`
- `36`
- `44`
- `52`
- `56`
- `60`

Default: -

Padding on top and bottom

## Related components

- [Inline](/components/web/inline/inline.guidelines): A utility component for controlling horizontal layouts.
- [Stack](/components/web/stack/stack.guidelines): A utility component for controlling vertical layouts.