Пространство

Пространство в интерфейсе делает две разные работы. Интервал показывает, насколько связаны два соседних элемента. Внутренний отступ отделяет содержимое от края своего контейнера. Эта глава даёт шкалу и правила для обеих работ.

Шкала интервалов

Все интервалы стоят на одной адаптивной шкале --sf-space-*. Её ступени 0, 1/4, 1/3, 1/2, 1…8 — та же соразмерная запись, что в Соразмерные ступени. Ступень 1 — обычный интервал, близкий к основному кеглю.

Полная таблица — в справочнике «Значения интервалов». Утилиты отступов и промежутков (p-*, m-*, gap-*, space-y-*) берут значения из этой шкалы: gap-2 — это gap: var(--sf-space-2). Синтаксис — в Как устроено имя утилиты и Значения.

• Нельзя заводить свою числовую шкалу поверх --sf-space-*: в проекте окажется два ряда интервалов, которые придётся согласовывать вручную.

Интервал выбирает родитель

Компонент не ставит себе внешний отступ по умолчанию. Расстояние описывает отношение двух соседей, а не свойство одного из них. Одна и та же карточка в ленте и в боковой панели стоит на разном расстоянии от соседей, и решает это поток, в котором она лежит.

Поток выбирает интервал по смысловой связи соседей:

Как выбирать интервал:

• текст после текста — --sf-content--space-text;
• подпись, управляющий элемент или пояснение внутри одного блока — --sf-content--space-related;
• таблица, уведомление, пример, карточка или другой самостоятельный блок рядом с таким же блоком — --sf-content--space-block;
• новый смысловой раздел — --sf-content--space-section.

Каждая роль стоит на ступени шкалы --sf-space-*, поэтому в разметке тот же интервал даёт утилита этой ступени:

Например, поток самостоятельных блоков одного раздела — flex flex-col gap-3. Если проект перенастроит роль, утилита за ней не последует: она читает ступень, а не роль. В таком проекте интервал потока задают в CSS через роль, как в примере ниже.

Интервал ставят один раз на границе между соседями. Нижний отступ первого блока с верхним отступом второго не складывают.

Пример показывает поток статьи, где интервал задаётся только верхним отступом следующего соседа:

.article-flow > :where(p, ul, ol) + :where(p, ul, ol) {
    margin-top: var(--sf-content--space-text);
}

.article-flow > [data-content-block] + [data-content-block] {
    margin-top: var(--sf-content--space-block);
}

.article-flow > :where(p, ul, ol, [data-content-block]) + :where(h2, h3, h4, h5, h6) {
    margin-top: var(--sf-content--space-section);
}

Селекторы принадлежат проекту и показаны как пример. Framework не требует обёртки с особым классом.

Поток текста

Для обычной разметки Framework уже задаёт ритм текста:

• абзац, список, таблица и цитата получают нижний отступ --sf-text--space-bottom (текстовый интервал);
• заголовки h2–h6 получают верхний отступ --sf-heading--space-top (интервал раздела) и нижний --sf-heading--space-bottom (текстовый);
• у h1 верхнего отступа нет: обычно он стоит в начале страницы.

Заголовок и его текст остаются одной группой: после заголовка — текстовый интервал, перед ним — интервал раздела.

Эти переменные ссылаются на роли из Интервал выбирает родитель, поэтому проект, поменявший роль, меняет и поток текста:

• --sf-text--space-bottom ссылается на --sf-content--space-text;
• --sf-heading--space-top ссылается на --sf-content--space-section;
• --sf-heading--space-bottom ссылается на --sf-content--space-text;
• --sf-heading--margin — совместимое имя для --sf-heading--space-top.

Для расстояния между самостоятельными блоками берите --sf-content--space-*, а не переменные заголовков. Как ядро оформляет текст без классов, сказано в «Тексте по умолчанию».

Чего не делать

• Не задавайте всем компонентам одинаковый margin-bottom.
• Не берите интервал заголовка для каждой пары блочных элементов.
• Не меняйте интервалы внутри дочернего компонента, если расстояние описывает отношение этого компонента к соседнему элементу.

Отступ внутри блока

Внутренний отступ блока (карточки, панели) берётся с той же ступени, что и его угол, а каждый вложенный уровень спускается на ступень ниже. Это правило вложенности описано вместе с радиусами в Вложенность: отступ и угол с одной ступени: отступ и угол — одно решение.

Отступ внутри контрола и общие оси

Внутри контрола отступы задаёт лестница (Части компонента — тоже со ступени): горизонтальный — --sf-ui-S--space-x, шаг от картинки до подписи — --sf-ui-S--text-space-x, вертикальный — по плотности.

Вертикальный отступ отдаёт место рамке:

вертикальный отступ = (H − L) / 2 − рамка

Поэтому контрол высотой 40 px складывается как 1 + 7 + 24 + 7 + 1: рамка, отступ, строка, отступ, рамка. Если вместо этого уменьшить содержимое до L − 2, каждая картинка в контроле окажется на 2 px меньше такой же картинки где-либо ещё.

Связанные части стоят на общих осях. Поле и его открытый список, подпись и контрол, строка и заголовок над ней выравниваются точно. Если контейнер добавляет свой отступ или рамку (список внутри панели), содержимое компенсирует его:

внутренний отступ = отступ соседа + рамка соседа − отступ контейнера

Поэтому пункт выпадающего списка начинает картинку там же, где поле, подпись — там, где начинается значение в поле, а галочка стоит на оси стрелки поля. Положение измеряется по глифу, а не по кнопке вокруг него.

Смотрите также

• Части компонента — тоже со ступени — размеры частей контрола.
• Вложенность: отступ и угол с одной ступени — вложенность отступа и угла.
• Как устроено имя утилиты и Значения — утилиты отступов и промежутков.
• Значения интервалов — все ступени --sf-space-* на узком и широком экране.
• Промежутки — утилиты gap-* в каталоге.