Отступы

Утилитарные CSS классы для отступов

Spaces

Наименования CSS классов для отступов состоят из нескольких частей: {prefix}-{p/m-side}-{size}.

Prefix

prefix - Префикс cds,

P/M

p - padding, используется для внутренних отступов.

m - margin, используется для внешних отступов.

Side

a - all, значение применяется для всех сторон.

t - top, применяется для верхней части элемента.

r - right, применяется только для правой части элемента.

b - bottom, применяется только для нижней части элемента.

l - left, применяется только для левой части элемента.

x - применяется для сторон по оси x.

y - применяется для сторон по оси y.

Примеры
CSS-классСвойство
.cds-pa-mpadding: 16px;
.cds-pt-mpadding-top: 16px;
.cds-pr-xlpadding-right: 32px;
.cds-mb-xlmargin-bottom: 32px;
.cds-ml-xsmargin-left: 8px;
.cds-mx-xsmargin-right: 8px; margin-left: 8px;
.cds-my-nonemargin-top: 0; margin-bottom: 0;
Значения
ЗначениеSize (rem/px)Mini unit
none0px0
3xs0.125 / 20.25
xxs0.25 / 40.5
xs0.5 / 81
s0.75 / 121.5
m1 / 162
l1.5 / 243
xl2 / 324
xxl2.5 / 405
3xl3 / 486
4xl4 / 648
5xl5 / 8010
6xl6 / 9612
Новое мажорное обновление!
Мы активно разрабатываем дизайн систему CDS 3.0 на Vue 3