Внутренний отступ (padding)link

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

Модификатор для внутреннего отступа (padding) контролирует пространство между контентом элемента и его границами.

В обновлённой системе размеров SIMAI Framework базовый размер (1) соответствует размеру шрифта (1rem). Отступы могут задаваться как дробными значениями (например, 1/4, 1/3, 1/2) для более точной настройки, так и целочисленными ( например, 2, 3) для более крупных отступов. Это упрощает адаптацию интерфейса под различные экраны и повышает точность при создании сложных макетов.

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

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

Аналогичные классы действуют для каждой стороны отдельно, подставляя top, right, bottom или left после префикса p-. Например:

p-top-1/2 задаёт внутренний отступ сверху равный var(--sf-space-1/2);
p-left-1 задаёт внутренний отступ слева равный var(--sf-space-1);

Синтаксисlink

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

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

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

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

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

<div class="p-top-4 p-right-1 p-bottom-2 p-left-1/3">
    <!-- Отступы сверху, справа, снизу и слева заданы отдельно -->
</div>

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

Для удобства перехода со старых значений на новые рекомендуется использовать таблицу замены. В старой версии размеры были обозначены числами от 1 до 9. Теперь они пересчитаны:

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

Например, если раньше использовался класс p-8, то теперь следует использовать p-4.

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

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

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