Внешний отступ (margin)link

https://dev.ru.simai.io/ru/ui/utility/space/margin.php

Модификатор внешнего отступа (margin) управляет свободным пространством вокруг элемента, влияя на положение элемента относительно соседних объектов. Он не влияет на внутреннее пространство элемента, а регулирует отступ от границ соседних элементов или контейнера. Это помогает структурировать макет страницы и создавать визуальные интервалы между блоками интерфейса.

Таблица классовlink

Класс	Значение
.m-0	margin: var(`--sf-space-0`);
.m-1/4	margin: var(`--sf-space-1/4`);
.m-1/3	margin: var(`--sf-space-1/3`);
.m-1/2	margin: var(`--sf-space-1/2`);
.m-1	margin: var(`--sf-space-1`);
.m-2	margin: var(`--sf-space-2`);
.m-3	margin: var(`--sf-space-3`);
.m-4	margin: var(`--sf-space-4`);
.m-5	margin: var(`--sf-space-5`);
.m-6	margin: var(`--sf-space-6`);
.m-7	margin: var(`--sf-space-7`);
.m-8	margin: var(`--sf-space-8`);
.m-auto	margin: auto;

По аналогии с внутренним отступом, вы можете указать отступ только с одной стороны, например m-top-1/2 или m-left-1.
Отрицательный отступ задаётся добавлением префикса -, например -m-1 или -m-top-4.

Синтаксисlink

Использование:
{контрольная точка}:{модификатор} или просто {модификатор}

Контрольная точка (необязательный параметр):
Применяет модификатор начиная с определённого размера экрана (sm, md, lg, xl). Если контрольная точка не указана, модификатор действует для всех размеров.
Модификатор (обязательный параметр):
- m-{размер} для отступа со всех сторон.
- m-top-{размер}, m-right-{размер}, m-bottom-{размер}, m-left-{размер} — для отступа с конкретной стороны.
- m-auto — для автоматического отступа.
- -m-{размер}, -m-top-{размер} и т.д. — для отрицательного отступа.

Где {размер} может быть 0, 1/4, 1/3, 1/2, 1, 2, 3, 4, 5, 6, 7, 8.

Пример использованияlink

<div class="m-1/2">
    <!-- Внешний отступ со всех сторон равен var(--sf-space-1/2) -->
</div>

<div class="m-top-4 m-right-1 m-bottom-2 m-left-1/3">
    <!-- Внешние отступы заданы для каждой стороны отдельно -->
</div>

<div class="-m-top-2">
    <!-- Отрицательный внешний отступ сверху -->
</div>

Переход со старой системыlink

Старое значение	Новое значение
.m-1	.m-1/3
.m-2	.m-1/2
.m-3	.m-1
.m-4	.m-1
.m-5	.m-2
.m-6	.m-3
.m-7	.m-4
.m-8	.m-4
.m-9	.m-5

Если ранее использовался класс m-8, в новой системе следует использовать m-4.

Адаптивностьlink

Для установки отступа, начиная с определённого размера экрана, добавьте префикс контрольной точки:

<div class="md:m-4">
    <!-- Начиная с размера md и больше, отступ равен var(--sf-space-4) -->
</div>