---
description: Компонент для создания вертикальных отступов между элементами интерфейса.
---

<Overview group="layout">

# Spacing [tag:component]

Компонент для создания вертикальных отступов между элементами интерфейса.

</Overview>

## Основное использование

import { BlockWrapper } from '@/components/wrappers';

{/* @example-description: Базовый вертикальный отступ `Spacing` между двумя текстовыми блоками. */}
<Playground Wrapper={BlockWrapper}>
  ```jsx
  <Text>Текст над отступом</Text>
  <Spacing size="4xl" />
  <Text>Текст под отступом</Text>
  ```
</Playground>

## Размеры отступа

Задаются свойством `size`.
Принимает значения дизайн-системы (например, `"s"`, `"m"`, `"l"`), числовые значения и `CSS`-переменные.

```jsx
<Spacing size="xs" /> // 4px
<Spacing size={32} /> // 32px
<Spacing size="var(--custom-spacing)" /> // Кастомная CSS-переменная
```

## Особенности

- Не принимает контент (свойство `children` устарело).
- Для горизонтальных разделителей используйте [`Separator`](/components/separator).
- Работает как прозрачный блок заданной высоты.

## Свойства и методы [#api]

| Свойство | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `getRootRef` | `Ref<HTMLDivElement>` | `-` |  |
| `size` | `SpacingSizeProp` | `m` | Высота спэйсинга.  Принимает значения дизайн-системы, числовые значения и css-переменные. |