> Markdown version of [Sizing and Spacing](https://vaadin.com/docs/v14/flow/styling/lumo/sizing-and-spacing). Section index: [llms.txt](https://vaadin.com/docs/v14/flow/llms.txt)

# Lumo Sizing and Spacing

Lumo defines a set of CSS custom properties you can use to apply consistent sizing and spacing across your application.

## <a id="size"></a>Size

Use these properties to adjust the sizing of regular elements (buttons, text fields, list items).

**M is the standard size**, and it is primarily used to size buttons, text fields and list items. If you adjust the sizing, make sure to keep it large enough for touch targets.

See [Icons](https://vaadin.com/docs/v14/flow/styling/lumo/icons.md) for properties that affect the sizing of icons.

- - \--lumo-size-xs: `1.625rem`
  - \--lumo-size-s: `1.875rem`
  - \--lumo-size-m: `2.25rem`
  - \--lumo-size-l: `2.75rem`
  - \--lumo-size-xl: `3.5rem`

## <a id="space"></a>Space

Use these properties to adjust the inter-component spacings: the space outside a regular component (button, text field) or inside a container component (layouts, grid cells).

##### Uniform

Use these properties for margin or padding in a single direction or uniformly on all sides.

- - \--lumo-space-xs: `0.25rem`
  - \--lumo-space-s: `0.5rem`
  - \--lumo-space-m: `1rem`
  - \--lumo-space-l: `1.5rem`
  - \--lumo-space-xl: `2.5rem`

##### Wide

Use these properties for margin or padding to have a bigger horizontal space than vertical space.

- - \--lumo-space-wide-xs: `calc( 0.25rem / 2) 0.25rem`
  - \--lumo-space-wide-s: `calc( 0.5rem / 2) 0.5rem`
  - \--lumo-space-wide-m: `calc( 1rem / 2) 1rem`
  - \--lumo-space-wide-l: `calc( 1.5rem / 2) 1.5rem`
  - \--lumo-space-wide-xl: `calc( 2.5rem / 2) 2.5rem`

##### Tall

Use these properties for margin or padding to have a bigger vertical space than horizontal space.

- - \--lumo-space-tall-xs: `0.25rem calc( 0.25rem / 2)`
  - \--lumo-space-tall-s: `0.5rem calc( 0.5rem / 2)`
  - \--lumo-space-tall-m: `1rem calc( 1rem / 2)`
  - \--lumo-space-tall-l: `1.5rem calc( 1.5rem / 2)`
  - \--lumo-space-tall-xl: `2.5rem calc( 2.5rem / 2)`

## <a id="examples"></a>Examples

### <a id="sizing"></a>Sizing

```html
<span class="size-xs">XS</span>
<span class="size-s">S</span>
<span class="size-m">M</span>
<span class="size-l">L</span>
<span class="size-xl">XL</span>

<custom-style>
  <style>
    .size-xs {
      width: var(--lumo-size-xs);
      height: var(--lumo-size-xs);
    }
    .size-s {
      width: var(--lumo-size-s);
      height: var(--lumo-size-s);
    }
    .size-m {
      width: var(--lumo-size-m);
      height: var(--lumo-size-m);
    }
    .size-l {
      width: var(--lumo-size-l);
      height: var(--lumo-size-l);
    }
    .size-xl {
      width: var(--lumo-size-xl);
      height: var(--lumo-size-xl);
    }
  </style>
</custom-style>
```

### <a id="spacing"></a>Spacing

#### Uniform

```html
<span class="space-xs">XS</span>
<span class="space-s">S</span>
<span class="space-m">M</span>
<span class="space-l">L</span>
<span class="space-xl">XL</span>

<custom-style>
  <style>
    .space-xs {
      padding: var(--lumo-space-xs);
    }
    .space-s {
      padding: var(--lumo-space-s);
    }
    .space-m {
      padding: var(--lumo-space-m);
    }
    .space-l {
      padding: var(--lumo-space-l);
    }
    .space-xl {
      padding: var(--lumo-space-xl);
    }
  </style>
</custom-style>
```

#### Wide

```html
<span class="space-wide-xs">XS</span>
<span class="space-wide-s">S</span>
<span class="space-wide-m">M</span>
<span class="space-wide-l">L</span>
<span class="space-wide-xl">XL</span>

<custom-style>
  <style>
    .space-wide-xs {
      padding: var(--lumo-space-wide-xs);
    }
    .space-wide-s {
      padding: var(--lumo-space-wide-s);
    }
    .space-wide-m {
      padding: var(--lumo-space-wide-m);
    }
    .space-wide-l {
      padding: var(--lumo-space-wide-l);
    }
    .space-wide-xl {
      padding: var(--lumo-space-wide-xl);
    }
  </style>
</custom-style>
```

#### Tall

```html
<span class="space-tall-xs">XS</span>
<span class="space-tall-s">S</span>
<span class="space-tall-m">M</span>
<span class="space-tall-l">L</span>
<span class="space-tall-xl">XL</span>

<custom-style>
  <style>
    .space-tall-xs {
      padding: var(--lumo-space-tall-xs);
    }
    .space-tall-s {
      padding: var(--lumo-space-tall-s);
    }
    .space-tall-m {
      padding: var(--lumo-space-tall-m);
    }
    .space-tall-l {
      padding: var(--lumo-space-tall-l);
    }
    .space-tall-xl {
      padding: var(--lumo-space-tall-xl);
    }
  </style>
</custom-style>
```

`E0B7EF54-50D7-4FC6-B255-D508B681B38C`