Отступы и размеры: padding, margin, block spacing
Три инструмента управления пространством
Заголовок раздела «Три инструмента управления пространством»В блочном редакторе доступны три ключевых инструмента для управления расстояниями:
| Инструмент | Где действует |
|---|---|
| Padding | Внутренний отступ — пространство между контентом и границей блока |
| Margin | Внешний отступ — пространство между блоком и соседними элементами |
| Block spacing | Расстояние между вложенными блоками внутри контейнера (Group, Columns) |
Как открыть настройки
Заголовок раздела «Как открыть настройки»- Выберите блок
- Settings (боковая панель справа) → Styles → Dimensions
- Если padding/margin не видны: три точки → включить в списке
Padding
Заголовок раздела «Padding»Настройка
Заголовок раздела «Настройка»- Горизонтальный + вертикальный слайдеры (от 0 до XXL)
- Кастомные значения с единицами:
px,%,rem,em,vh,vw - Unlink sides — раздельная настройка top/right/bottom/left
Когда использовать
Заголовок раздела «Когда использовать»- Кнопки с текстом внутри — горизонтальный и вертикальный padding
- Карточки — padding вокруг контента
- Секции с фоном — padding, чтобы контент не прилипал к краям
Настройка
Заголовок раздела «Настройка»- Те же контролы, что у padding
- Отрицательные значения — доступны в расширенных настройках (advanced)
Когда использовать
Заголовок раздела «Когда использовать»- Добавить «воздуха» между секциями
- Расстояние между header и контентом
- Точная настройка позиционирования
Block spacing
Заголовок раздела «Block spacing»Block spacing — специфичный для контейнеров параметр, управляющий расстоянием между вложенными блоками.
Когда использовать
Заголовок раздела «Когда использовать»- Установить в 0 — «склеить» элементы (например, изображения в галерее без зазоров)
- Настроить горизонтальное расстояние между элементами в Group/Row
- Управлять вертикальным ритмом внутри секций
Глобальные значения через Style Book
Заголовок раздела «Глобальные значения через Style Book»Можно задать дефолтные padding, margin и block spacing для типов блоков глобально:
- Media → Media & Text — добавить вертикальный padding
- Design → Buttons — горизонтальный + вертикальный padding
- Layout — вертикальный padding для основной области контента, block spacing
Практические примеры
Заголовок раздела «Практические примеры»- Сетка без зазоров: вставить паттерн → Grid block → spacing = XS
- Просторные колонки: паттерн → Columns → padding = XX-Large
- Кнопка с отступами: Buttons «Learn more» → горизонтальный padding 10px, вертикальный 20px
- Секции друг за другом: два Cover блока → нижний margin первого = Regular
Все изменения видны в реальном времени. Экспериментируйте с комбинациями — CSS не требуется.