> ## Documentation Index
> Fetch the complete documentation index at: https://docs.landerlab.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Box: группировка и выравнивание элементов на лендинге

> Элемент Box в LanderLab: как группировать элементы, вкладывать контейнеры и настраивать направление, выравнивание, Gap и отступы на лендинге.

Элемент Box — один из самых важных инструментов вёрстки в LanderLab.

Он позволяет группировать, упорядочивать и точнее контролировать элементы на странице.

## Что такое Box?

Box — это контейнер, внутри которого находятся другие элементы.

Внутрь Box можно поместить:

* Текст
* Изображения
* Кнопки
* Списки
* Другие Box

👉 Представляйте его как обёртку, которая помогает структурировать контент.

<Note>
  Важно

  * Box необходимы для структуры макета
  * Box можно вкладывать друг в друга для большей гибкости
  * Они помогают решить большинство проблем с выравниванием и отступами
</Note>

### Как добавить Box

* Откройте левую боковую панель
* Перейдите в **Layout**
* Перетащите **Box** в секцию или колонку

## Почему Box так важны

Box дают больше контроля над расположением элементов.

С их помощью вы можете:

* Группировать связанные элементы
* Правильно выравнивать элементы
* Создавать более сложные макеты
* Точно настраивать отступы и позиционирование

👉 Большинство детальных макетов опираются на Box.

## Как работают Box

Пример структуры:<br />Section → Columns → Box → Elements

* Box находится внутри колонок или секций
* Элементы размещаются внутри Box
* Box можно помещать в другие Box для большего контроля

## Управление раскладкой

При выбранном Box вы можете настраивать:

* **Direction** → расположение элементов в строку или в столбец
* **Alignment** → позиция элементов (слева, по центру, справа)
* **Distribution** → равномерное распределение элементов
* **Gap** → расстояние между элементами

Именно здесь выполняется большинство настроек раскладки.

## Параметры оформления

Box также поддерживает:

* Фоны (цвет или градиент)
* Отступы (padding и margin)
* Границы и скругления
* Тени
* Ширину и высоту


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.