Внешний отступ

Классы m-* задают свойство margin — пространство снаружи элемента, которое отодвигает соседей и края родителя. Берите их, чтобы отделить блок от окружения, прижать элемент к краю через auto или сдвинуть его отрицательным отступом.

Пример

Шкала отступов

Тёмный блок стоит внутри пунктирной рамки; светлая полоса между ними — внешний отступ. Подпись над образцом — класс на тёмном блоке.

m-0

Блок

m-1/4

Блок

m-1/2

Блок

m-1

Блок

m-2

Блок

m-3

Блок

m-4

Блок

HTML

<div class="flex flex-wrap gap-4 items-end color-on-surface">
  <div class="flex flex-col gap-1 items-start">
    <code class="text-1/2 color-on-surface-variant">m-0</code>
    <div class="flex bg-primary-container border border-dashed border-primary radius-ui">
      <div class="m-0 p-1/2 bg-primary color-on-primary radius-ui">Блок</div>
    </div>
  </div>
  <div class="flex flex-col gap-1 items-start">
    <code class="text-1/2 color-on-surface-variant">m-1/4</code>
    <div class="flex bg-primary-container border border-dashed border-primary radius-ui">
      <div class="m-1/4 p-1/2 bg-primary color-on-primary radius-ui">Блок</div>
    </div>
  </div>
  <div class="flex flex-col gap-1 items-start">
    <code class="text-1/2 color-on-surface-variant">m-1/2</code>
    <div class="flex bg-primary-container border border-dashed border-primary radius-ui">
      <div class="m-1/2 p-1/2 bg-primary color-on-primary radius-ui">Блок</div>
    </div>
  </div>
  <div class="flex flex-col gap-1 items-start">
    <code class="text-1/2 color-on-surface-variant">m-1</code>
    <div class="flex bg-primary-container border border-dashed border-primary radius-ui">
      <div class="m-1 p-1/2 bg-primary color-on-primary radius-ui">Блок</div>
    </div>
  </div>
  <div class="flex flex-col gap-1 items-start">
    <code class="text-1/2 color-on-surface-variant">m-2</code>
    <div class="flex bg-primary-container border border-dashed border-primary radius-ui">
      <div class="m-2 p-1/2 bg-primary color-on-primary radius-ui">Блок</div>
    </div>
  </div>
  <div class="flex flex-col gap-1 items-start">
    <code class="text-1/2 color-on-surface-variant">m-3</code>
    <div class="flex bg-primary-container border border-dashed border-primary radius-ui">
      <div class="m-3 p-1/2 bg-primary color-on-primary radius-ui">Блок</div>
    </div>
  </div>
  <div class="flex flex-col gap-1 items-start">
    <code class="text-1/2 color-on-surface-variant">m-4</code>
    <div class="flex bg-primary-container border border-dashed border-primary radius-ui">
      <div class="m-4 p-1/2 bg-primary color-on-primary radius-ui">Блок</div>
    </div>
  </div>
</div>

Одна сторона или ось

m-top-* и m-bottom-* задают отступ сверху и снизу, m-inline-start-* и m-inline-end-* — в начале и в конце строки, m-inline-* и m-block-* — сразу по обе стороны строчной или блочной оси.

m-top-3

Блок

m-bottom-3

Блок

m-inline-start-3

Блок

m-inline-end-3

Блок

m-inline-3

Блок

m-block-3

Блок

HTML

<div class="flex flex-wrap gap-4 items-end color-on-surface">
  <div class="flex flex-col gap-1 items-start">
    <code class="text-1/2 color-on-surface-variant">m-top-3</code>
    <div class="flex bg-primary-container border border-dashed border-primary radius-ui">
      <div class="m-top-3 p-1/2 bg-primary color-on-primary radius-ui">Блок</div>
    </div>
  </div>
  <div class="flex flex-col gap-1 items-start">
    <code class="text-1/2 color-on-surface-variant">m-bottom-3</code>
    <div class="flex bg-primary-container border border-dashed border-primary radius-ui">
      <div class="m-bottom-3 p-1/2 bg-primary color-on-primary radius-ui">Блок</div>
    </div>
  </div>
  <div class="flex flex-col gap-1 items-start">
    <code class="text-1/2 color-on-surface-variant">m-inline-start-3</code>
    <div class="flex bg-primary-container border border-dashed border-primary radius-ui">
      <div class="m-inline-start-3 p-1/2 bg-primary color-on-primary radius-ui">Блок</div>
    </div>
  </div>
  <div class="flex flex-col gap-1 items-start">
    <code class="text-1/2 color-on-surface-variant">m-inline-end-3</code>
    <div class="flex bg-primary-container border border-dashed border-primary radius-ui">
      <div class="m-inline-end-3 p-1/2 bg-primary color-on-primary radius-ui">Блок</div>
    </div>
  </div>
  <div class="flex flex-col gap-1 items-start">
    <code class="text-1/2 color-on-surface-variant">m-inline-3</code>
    <div class="flex bg-primary-container border border-dashed border-primary radius-ui">
      <div class="m-inline-3 p-1/2 bg-primary color-on-primary radius-ui">Блок</div>
    </div>
  </div>
  <div class="flex flex-col gap-1 items-start">
    <code class="text-1/2 color-on-surface-variant">m-block-3</code>
    <div class="flex bg-primary-container border border-dashed border-primary radius-ui">
      <div class="m-block-3 p-1/2 bg-primary color-on-primary radius-ui">Блок</div>
    </div>
  </div>
</div>

Начало и конец строки

Стороны inline-start и inline-end следуют направлению текста: при dir="rtl" начало строки справа, и отступ переходит туда же.

dir="ltr" · m-inline-start-4

Начало строки

dir="rtl" · m-inline-start-4

Начало строки

HTML

<div class="grid gap-3 color-on-surface">
  <div class="flex flex-col gap-1 items-start">
    <code class="text-1/2 color-on-surface-variant">dir="ltr" · m-inline-start-4</code>
    <div dir="ltr" class="flex w-full bg-primary-container border border-dashed border-primary radius-ui">
      <div class="m-inline-start-4 p-1/2 bg-primary color-on-primary radius-ui">Начало строки</div>
    </div>
  </div>
  <div class="flex flex-col gap-1 items-start">
    <code class="text-1/2 color-on-surface-variant">dir="rtl" · m-inline-start-4</code>
    <div dir="rtl" class="flex w-full bg-primary-container border border-dashed border-primary radius-ui">
      <div class="m-inline-start-4 p-1/2 bg-primary color-on-primary radius-ui">Начало строки</div>
    </div>
  </div>
</div>

Отрицательный отступ

Класс с минусом впереди тянет элемент наружу: на соседний блок или за край родителя.

-m-top-3 на втором блоке

Первый блок

Второй блок

-m-inline-start-3 на элементах 2 и 3

HTML

<div class="flex flex-wrap gap-4 items-end color-on-surface">
  <div class="flex flex-col gap-1 items-start">
    <code class="text-1/2 color-on-surface-variant">-m-top-3 на втором блоке</code>
    <div class="flex flex-col p-2 bg-surface-container border border-dashed border-outline radius-ui">
      <div class="p-1 bg-primary-container color-on-primary-container radius-ui">Первый блок</div>
      <div class="-m-top-3 m-inline-start-3 p-1 bg-primary color-on-primary radius-ui">Второй блок</div>
    </div>
  </div>
  <div class="flex flex-col gap-1 items-start">
    <code class="text-1/2 color-on-surface-variant">-m-inline-start-3 на элементах 2 и 3</code>
    <div class="flex p-2 bg-surface-container border border-dashed border-outline radius-ui">
      <div class="w-d8 h-d8 flex items-center content-main-center bg-primary-container color-on-primary-container border border-primary radius-rounded">1</div>
      <div class="-m-inline-start-3 w-d8 h-d8 flex items-center content-main-center bg-secondary-container color-on-secondary-container border border-secondary radius-rounded">2</div>
      <div class="-m-inline-start-3 w-d8 h-d8 flex items-center content-main-center bg-tertiary-container color-on-tertiary-container border border-tertiary radius-rounded">3</div>
    </div>
  </div>
</div>

Автоматический отступ

auto забирает всё свободное место по своей стороне: центрирует блок заданной ширины или прижимает элемент флекс-контейнера к дальнему краю.

m-inline-auto

По центру строки

m-inline-start-auto на последнем элементе

Раздел

В конце строки

m-top-auto на последнем элементе

Содержимое

Внизу колонки

HTML

<div class="flex flex-col gap-3 color-on-surface">
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">m-inline-auto</code>
    <div class="p-1 bg-surface-container border border-dashed border-outline radius-ui">
      <div class="m-inline-auto w-f4 p-1 text-center bg-primary color-on-primary radius-ui">По центру строки</div>
    </div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">m-inline-start-auto на последнем элементе</code>
    <div class="flex gap-1 p-1 bg-surface-container border border-dashed border-outline radius-ui">
      <div class="p-1 bg-primary-container color-on-primary-container radius-ui">Раздел</div>
      <div class="p-1 bg-primary-container color-on-primary-container radius-ui">Раздел</div>
      <div class="m-inline-start-auto p-1 bg-primary color-on-primary radius-ui">В конце строки</div>
    </div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">m-top-auto на последнем элементе</code>
    <div class="flex flex-col gap-1 h-f4 p-1 bg-surface-container border border-dashed border-outline radius-ui">
      <div class="p-1 bg-primary-container color-on-primary-container radius-ui">Содержимое</div>
      <div class="m-top-auto p-1 bg-primary color-on-primary radius-ui">Внизу колонки</div>
    </div>
  </div>
</div>

Фиксированная шкала

Классы вида m-a4, m-c4 берут размер из шкалы --sf-a0 … --sf-i9 и не меняются с шириной экрана.

m-a4

Блок

m-b0

Блок

m-b8

Блок

m-c4

Блок

m-d0

Блок

HTML

<div class="flex flex-wrap gap-4 items-end color-on-surface">
  <div class="flex flex-col gap-1 items-start">
    <code class="text-1/2 color-on-surface-variant">m-a4</code>
    <div class="flex bg-primary-container border border-dashed border-primary radius-ui">
      <div class="m-a4 p-1/2 bg-primary color-on-primary radius-ui">Блок</div>
    </div>
  </div>
  <div class="flex flex-col gap-1 items-start">
    <code class="text-1/2 color-on-surface-variant">m-b0</code>
    <div class="flex bg-primary-container border border-dashed border-primary radius-ui">
      <div class="m-b0 p-1/2 bg-primary color-on-primary radius-ui">Блок</div>
    </div>
  </div>
  <div class="flex flex-col gap-1 items-start">
    <code class="text-1/2 color-on-surface-variant">m-b8</code>
    <div class="flex bg-primary-container border border-dashed border-primary radius-ui">
      <div class="m-b8 p-1/2 bg-primary color-on-primary radius-ui">Блок</div>
    </div>
  </div>
  <div class="flex flex-col gap-1 items-start">
    <code class="text-1/2 color-on-surface-variant">m-c4</code>
    <div class="flex bg-primary-container border border-dashed border-primary radius-ui">
      <div class="m-c4 p-1/2 bg-primary color-on-primary radius-ui">Блок</div>
    </div>
  </div>
  <div class="flex flex-col gap-1 items-start">
    <code class="text-1/2 color-on-surface-variant">m-d0</code>
    <div class="flex bg-primary-container border border-dashed border-primary radius-ui">
      <div class="m-d0 p-1/2 bg-primary color-on-primary radius-ui">Блок</div>
    </div>
  </div>
</div>

Ширина экрана

С префиксом ширины класс действует от указанной ширины и шире. Меняйте ширину окна просмотра: начиная с ширины md отступ вокруг блока растёт.

HTML

<div class="flex flex-wrap gap-4 items-end color-on-surface">
  <div class="flex flex-col gap-1 items-start">
    <code class="text-1/2 color-on-surface-variant">m-1 md:m-5</code>
    <div class="flex bg-primary-container border border-dashed border-primary radius-ui">
      <div class="m-1 md:m-5 p-1/2 bg-primary color-on-primary radius-ui">Отступ растёт от ширины md</div>
    </div>
  </div>
</div>

Классы

Класс	CSS	Значения
`m-{значение}`	`margin: var(--sf-space-{значение})`	`auto`, `0`, `1/4`, `1/3`, `1/2`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`
`-m-{значение}`	`margin: calc(0rem - var(--sf-space-{значение}))`	`auto`, `1/4`, `1/3`, `1/2`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`
`m-top-{значение}`	`margin-top: var(--sf-space-{значение})`	`auto`, `0`, `1/4`, `1/3`, `1/2`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`
`-m-top-{значение}`	`margin-top: calc(0rem - var(--sf-space-{значение}))`	`auto`, `1/4`, `1/3`, `1/2`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`
`m-inline-end-{значение}`	`margin-inline-end: var(--sf-space-{значение})`	`auto`, `0`, `1/4`, `1/3`, `1/2`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`
`-m-inline-end-{значение}`	`margin-inline-end: calc(0rem - var(--sf-space-{значение}))`	`auto`, `1/4`, `1/3`, `1/2`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`
`m-bottom-{значение}`	`margin-bottom: var(--sf-space-{значение})`	`auto`, `0`, `1/4`, `1/3`, `1/2`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`
`-m-bottom-{значение}`	`margin-bottom: calc(0rem - var(--sf-space-{значение}))`	`auto`, `1/4`, `1/3`, `1/2`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`
`m-inline-start-{значение}`	`margin-inline-start: var(--sf-space-{значение})`	`auto`, `0`, `1/4`, `1/3`, `1/2`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`
`-m-inline-start-{значение}`	`margin-inline-start: calc(0rem - var(--sf-space-{значение}))`	`auto`, `1/4`, `1/3`, `1/2`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`
`m-inline-{значение}`	`margin-left: var(--sf-space-{значение}); margin-right: var(--sf-space-{значение}); margin-inline: var(--sf-space-{значение})`	`auto`, `0`, `1/4`, `1/3`, `1/2`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`
`-m-inline-{значение}`	`margin-left: calc(0rem - var(--sf-space-{значение})); margin-right: calc(0rem - var(--sf-space-{значение})); margin-inline: calc(0rem - var(--sf-space-{значение}))`	`auto`, `1/4`, `1/3`, `1/2`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`
`m-block-{значение}`	`margin-top: var(--sf-space-{значение}); margin-bottom: var(--sf-space-{значение}); margin-block: var(--sf-space-{значение})`	`auto`, `0`, `1/4`, `1/3`, `1/2`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`
`-m-block-{значение}`	`margin-top: calc(0rem - var(--sf-space-{значение})); margin-bottom: calc(0rem - var(--sf-space-{значение})); margin-block: calc(0rem - var(--sf-space-{значение}))`	`auto`, `1/4`, `1/3`, `1/2`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`
`-m-0`	`margin: calc(0rem - var(--sf-space-0))`	—
`-m-top-0`	`margin-top: calc(0rem - var(--sf-space-0))`	—
`-m-inline-end-0`	`margin-inline-end: calc(0rem - var(--sf-space-0))`	—
`-m-bottom-0`	`margin-bottom: calc(0rem - var(--sf-space-0))`	—
`-m-inline-start-0`	`margin-inline-start: calc(0rem - var(--sf-space-0))`	—
`-m-inline-0`	`margin-left: calc(0rem - var(--sf-space-0)); margin-right: calc(0rem - var(--sf-space-0)); margin-inline: calc(0rem - var(--sf-space-0))`	—
`-m-block-0`	`margin-top: calc(0rem - var(--sf-space-0)); margin-bottom: calc(0rem - var(--sf-space-0)); margin-block: calc(0rem - var(--sf-space-0))`	—
`m-{значение}`	`margin: var(--sf-{значение})`	`a0`, `a1`, `a2`, `a3`, `a4`, `a5`, `a6`, `a7`, `a8`, `a9`, `b0`, `b1`, `b2`, `b3`, `b4`, `b5`, `b6`, `b7`, `b8`, `b9`, `c0`, `c1`, `c2`, `c3`, `c4`, `c5`, `c6`, `c7`, `c8`, `c9`, `d0`, `d1`, `d2`, `d3`, `d4`, `d5`, `d6`, `d7`, `d8`, `d9`, `e0`, `e1`, `e2`, `e3`, `e4`, `e5`, `e6`, `e7`, `e8`, `e9`, `f0`, `f1`, `f2`, `f3`, `f4`, `f5`, `f6`, `f7`, `f8`, `f9`, `g0`, `g1`, `g2`, `g3`, `g4`, `g5`, `g6`, `g7`, `g8`, `g9`, `h0`, `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `h7`, `h8`, `h9`, `i0`, `i1`, `i2`, `i3`, `i4`, `i5`, `i6`, `i7`, `i8`, `i9`
`-m-{значение}`	`margin: calc(0rem - var(--sf-{значение}))`	`a0`, `a1`, `a2`, `a3`, `a4`, `a5`, `a6`, `a7`, `a8`, `a9`, `b0`, `b1`, `b2`, `b3`, `b4`, `b5`, `b6`, `b7`, `b8`, `b9`, `c0`, `c1`, `c2`, `c3`, `c4`, `c5`, `c6`, `c7`, `c8`, `c9`, `d0`, `d1`, `d2`, `d3`, `d4`, `d5`, `d6`, `d7`, `d8`, `d9`, `e0`, `e1`, `e2`, `e3`, `e4`, `e5`, `e6`, `e7`, `e8`, `e9`, `f0`, `f1`, `f2`, `f3`, `f4`, `f5`, `f6`, `f7`, `f8`, `f9`, `g0`, `g1`, `g2`, `g3`, `g4`, `g5`, `g6`, `g7`, `g8`, `g9`, `h0`, `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `h7`, `h8`, `h9`, `i0`, `i1`, `i2`, `i3`, `i4`, `i5`, `i6`, `i7`, `i8`, `i9`
`m-top-{значение}`	`margin-top: var(--sf-{значение})`	`a0`, `a1`, `a2`, `a3`, `a4`, `a5`, `a6`, `a7`, `a8`, `a9`, `b0`, `b1`, `b2`, `b3`, `b4`, `b5`, `b6`, `b7`, `b8`, `b9`, `c0`, `c1`, `c2`, `c3`, `c4`, `c5`, `c6`, `c7`, `c8`, `c9`, `d0`, `d1`, `d2`, `d3`, `d4`, `d5`, `d6`, `d7`, `d8`, `d9`, `e0`, `e1`, `e2`, `e3`, `e4`, `e5`, `e6`, `e7`, `e8`, `e9`, `f0`, `f1`, `f2`, `f3`, `f4`, `f5`, `f6`, `f7`, `f8`, `f9`, `g0`, `g1`, `g2`, `g3`, `g4`, `g5`, `g6`, `g7`, `g8`, `g9`, `h0`, `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `h7`, `h8`, `h9`, `i0`, `i1`, `i2`, `i3`, `i4`, `i5`, `i6`, `i7`, `i8`, `i9`
`-m-top-{значение}`	`margin-top: calc(0rem - var(--sf-{значение}))`	`a0`, `a1`, `a2`, `a3`, `a4`, `a5`, `a6`, `a7`, `a8`, `a9`, `b0`, `b1`, `b2`, `b3`, `b4`, `b5`, `b6`, `b7`, `b8`, `b9`, `c0`, `c1`, `c2`, `c3`, `c4`, `c5`, `c6`, `c7`, `c8`, `c9`, `d0`, `d1`, `d2`, `d3`, `d4`, `d5`, `d6`, `d7`, `d8`, `d9`, `e0`, `e1`, `e2`, `e3`, `e4`, `e5`, `e6`, `e7`, `e8`, `e9`, `f0`, `f1`, `f2`, `f3`, `f4`, `f5`, `f6`, `f7`, `f8`, `f9`, `g0`, `g1`, `g2`, `g3`, `g4`, `g5`, `g6`, `g7`, `g8`, `g9`, `h0`, `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `h7`, `h8`, `h9`, `i0`, `i1`, `i2`, `i3`, `i4`, `i5`, `i6`, `i7`, `i8`, `i9`
`m-inline-end-{значение}`	`margin-inline-end: var(--sf-{значение})`	`a0`, `a1`, `a2`, `a3`, `a4`, `a5`, `a6`, `a7`, `a8`, `a9`, `b0`, `b1`, `b2`, `b3`, `b4`, `b5`, `b6`, `b7`, `b8`, `b9`, `c0`, `c1`, `c2`, `c3`, `c4`, `c5`, `c6`, `c7`, `c8`, `c9`, `d0`, `d1`, `d2`, `d3`, `d4`, `d5`, `d6`, `d7`, `d8`, `d9`, `e0`, `e1`, `e2`, `e3`, `e4`, `e5`, `e6`, `e7`, `e8`, `e9`, `f0`, `f1`, `f2`, `f3`, `f4`, `f5`, `f6`, `f7`, `f8`, `f9`, `g0`, `g1`, `g2`, `g3`, `g4`, `g5`, `g6`, `g7`, `g8`, `g9`, `h0`, `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `h7`, `h8`, `h9`, `i0`, `i1`, `i2`, `i3`, `i4`, `i5`, `i6`, `i7`, `i8`, `i9`
`-m-inline-end-{значение}`	`margin-inline-end: calc(0rem - var(--sf-{значение}))`	`a0`, `a1`, `a2`, `a3`, `a4`, `a5`, `a6`, `a7`, `a8`, `a9`, `b0`, `b1`, `b2`, `b3`, `b4`, `b5`, `b6`, `b7`, `b8`, `b9`, `c0`, `c1`, `c2`, `c3`, `c4`, `c5`, `c6`, `c7`, `c8`, `c9`, `d0`, `d1`, `d2`, `d3`, `d4`, `d5`, `d6`, `d7`, `d8`, `d9`, `e0`, `e1`, `e2`, `e3`, `e4`, `e5`, `e6`, `e7`, `e8`, `e9`, `f0`, `f1`, `f2`, `f3`, `f4`, `f5`, `f6`, `f7`, `f8`, `f9`, `g0`, `g1`, `g2`, `g3`, `g4`, `g5`, `g6`, `g7`, `g8`, `g9`, `h0`, `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `h7`, `h8`, `h9`, `i0`, `i1`, `i2`, `i3`, `i4`, `i5`, `i6`, `i7`, `i8`, `i9`
`m-bottom-{значение}`	`margin-bottom: var(--sf-{значение})`	`a0`, `a1`, `a2`, `a3`, `a4`, `a5`, `a6`, `a7`, `a8`, `a9`, `b0`, `b1`, `b2`, `b3`, `b4`, `b5`, `b6`, `b7`, `b8`, `b9`, `c0`, `c1`, `c2`, `c3`, `c4`, `c5`, `c6`, `c7`, `c8`, `c9`, `d0`, `d1`, `d2`, `d3`, `d4`, `d5`, `d6`, `d7`, `d8`, `d9`, `e0`, `e1`, `e2`, `e3`, `e4`, `e5`, `e6`, `e7`, `e8`, `e9`, `f0`, `f1`, `f2`, `f3`, `f4`, `f5`, `f6`, `f7`, `f8`, `f9`, `g0`, `g1`, `g2`, `g3`, `g4`, `g5`, `g6`, `g7`, `g8`, `g9`, `h0`, `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `h7`, `h8`, `h9`, `i0`, `i1`, `i2`, `i3`, `i4`, `i5`, `i6`, `i7`, `i8`, `i9`
`-m-bottom-{значение}`	`margin-bottom: calc(0rem - var(--sf-{значение}))`	`a0`, `a1`, `a2`, `a3`, `a4`, `a5`, `a6`, `a7`, `a8`, `a9`, `b0`, `b1`, `b2`, `b3`, `b4`, `b5`, `b6`, `b7`, `b8`, `b9`, `c0`, `c1`, `c2`, `c3`, `c4`, `c5`, `c6`, `c7`, `c8`, `c9`, `d0`, `d1`, `d2`, `d3`, `d4`, `d5`, `d6`, `d7`, `d8`, `d9`, `e0`, `e1`, `e2`, `e3`, `e4`, `e5`, `e6`, `e7`, `e8`, `e9`, `f0`, `f1`, `f2`, `f3`, `f4`, `f5`, `f6`, `f7`, `f8`, `f9`, `g0`, `g1`, `g2`, `g3`, `g4`, `g5`, `g6`, `g7`, `g8`, `g9`, `h0`, `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `h7`, `h8`, `h9`, `i0`, `i1`, `i2`, `i3`, `i4`, `i5`, `i6`, `i7`, `i8`, `i9`
`m-inline-start-{значение}`	`margin-inline-start: var(--sf-{значение})`	`a0`, `a1`, `a2`, `a3`, `a4`, `a5`, `a6`, `a7`, `a8`, `a9`, `b0`, `b1`, `b2`, `b3`, `b4`, `b5`, `b6`, `b7`, `b8`, `b9`, `c0`, `c1`, `c2`, `c3`, `c4`, `c5`, `c6`, `c7`, `c8`, `c9`, `d0`, `d1`, `d2`, `d3`, `d4`, `d5`, `d6`, `d7`, `d8`, `d9`, `e0`, `e1`, `e2`, `e3`, `e4`, `e5`, `e6`, `e7`, `e8`, `e9`, `f0`, `f1`, `f2`, `f3`, `f4`, `f5`, `f6`, `f7`, `f8`, `f9`, `g0`, `g1`, `g2`, `g3`, `g4`, `g5`, `g6`, `g7`, `g8`, `g9`, `h0`, `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `h7`, `h8`, `h9`, `i0`, `i1`, `i2`, `i3`, `i4`, `i5`, `i6`, `i7`, `i8`, `i9`
`-m-inline-start-{значение}`	`margin-inline-start: calc(0rem - var(--sf-{значение}))`	`a0`, `a1`, `a2`, `a3`, `a4`, `a5`, `a6`, `a7`, `a8`, `a9`, `b0`, `b1`, `b2`, `b3`, `b4`, `b5`, `b6`, `b7`, `b8`, `b9`, `c0`, `c1`, `c2`, `c3`, `c4`, `c5`, `c6`, `c7`, `c8`, `c9`, `d0`, `d1`, `d2`, `d3`, `d4`, `d5`, `d6`, `d7`, `d8`, `d9`, `e0`, `e1`, `e2`, `e3`, `e4`, `e5`, `e6`, `e7`, `e8`, `e9`, `f0`, `f1`, `f2`, `f3`, `f4`, `f5`, `f6`, `f7`, `f8`, `f9`, `g0`, `g1`, `g2`, `g3`, `g4`, `g5`, `g6`, `g7`, `g8`, `g9`, `h0`, `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `h7`, `h8`, `h9`, `i0`, `i1`, `i2`, `i3`, `i4`, `i5`, `i6`, `i7`, `i8`, `i9`

Условия (что это): ширина экрана — sm:, md:, lg:, xl:, xxl:; состояния — нет. Например: sm:m-auto.

Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.

Переменные

Классы читают эти токены темы. Изменённый токен меняет все места, где он используется, — классы, компоненты и тему; задайте его в теме проекта, а не на отдельном элементе. Все токены — на странице Все токены.

Переменная	Значение по умолчанию
`--sf-space-auto`	`auto`
`--sf-space-0`	`0`
`--sf-space-1/4`	`0.25rem; от ширины lg: var(--sf-a4)`
`--sf-space-1/3`	`0.5rem; от ширины lg: var(--sf-a8)`
`--sf-space-1/2`	`0.5rem; от ширины lg: 0.75rem`
`--sf-space-1`	`var(--sf-b2); от ширины lg: var(--sf-b6)`
`--sf-space-2`	`var(--sf-b6); от ширины lg: var(--sf-c0)`
`--sf-space-3`	`var(--sf-b6); от ширины lg: var(--sf-c2)`
`--sf-space-4`	`var(--sf-c2); от ширины lg: var(--sf-c6)`
`--sf-space-5`	`var(--sf-c6); от ширины lg: var(--sf-d0)`
`--sf-space-6`	`var(--sf-c6); от ширины lg: var(--sf-d2)`
`--sf-space-7`	`var(--sf-d0); от ширины lg: var(--sf-d6)`
`--sf-space-8`	`var(--sf-d2); от ширины lg: var(--sf-e0)`
`--sf-a0`	`0rem`
`--sf-a1`	`0.0625rem`
`--sf-a2`	`0.125rem`
`--sf-a3`	`0.1875rem`
`--sf-a4`	`0.25rem`
`--sf-a5`	`0.3125rem`
`--sf-a6`	`0.375rem`
`--sf-a7`	`0.4375rem`
`--sf-a8`	`0.5rem`
`--sf-a9`	`0.5625rem`
`--sf-b0`	`0.625rem`
`--sf-b1`	`0.6875rem`
`--sf-b2`	`0.75rem`
`--sf-b3`	`0.8125rem`
`--sf-b4`	`0.875rem`
`--sf-b5`	`0.9375rem`
`--sf-b6`	`1rem`
`--sf-b7`	`1.0625rem`
`--sf-b8`	`1.125rem`
`--sf-b9`	`1.1875rem`
`--sf-c0`	`1.25rem`
`--sf-c1`	`1.375rem`
`--sf-c2`	`1.5rem`
`--sf-c3`	`1.625rem`
`--sf-c4`	`1.75rem`
`--sf-c5`	`1.875rem`
`--sf-c6`	`2rem`
`--sf-c7`	`2.125rem`
`--sf-c8`	`2.25rem`
`--sf-c9`	`2.375rem`
`--sf-d0`	`2.5rem`
`--sf-d1`	`2.75rem`
`--sf-d2`	`3rem`
`--sf-d3`	`3.25rem`
`--sf-d4`	`3.5rem`
`--sf-d5`	`3.75rem`
`--sf-d6`	`4rem`
`--sf-d7`	`4.25rem`
`--sf-d8`	`4.5rem`
`--sf-d9`	`4.75rem`
`--sf-e0`	`5rem`
`--sf-e1`	`5.5rem`
`--sf-e2`	`6rem`
`--sf-e3`	`6.5rem`
`--sf-e4`	`7rem`
`--sf-e5`	`7.5rem`
`--sf-e6`	`8rem`
`--sf-e7`	`8.5rem`
`--sf-e8`	`9rem`
`--sf-e9`	`9.5rem`
`--sf-f0`	`10rem`
`--sf-f1`	`11rem`
`--sf-f2`	`12rem`
`--sf-f3`	`13rem`
`--sf-f4`	`14rem`
`--sf-f5`	`15rem`
`--sf-f6`	`16rem`
`--sf-f7`	`17rem`
`--sf-f8`	`18rem`
`--sf-f9`	`19rem`
`--sf-g0`	`20rem`
`--sf-g1`	`22rem`
`--sf-g2`	`24rem`
`--sf-g3`	`26rem`
`--sf-g4`	`28rem`
`--sf-g5`	`30rem`
`--sf-g6`	`32rem`
`--sf-g7`	`34rem`
`--sf-g8`	`36rem`
`--sf-g9`	`38rem`
`--sf-h0`	`40rem`
`--sf-h1`	`44rem`
`--sf-h2`	`48rem`
`--sf-h3`	`52rem`
`--sf-h4`	`56rem`
`--sf-h5`	`60rem`
`--sf-h6`	`64rem`
`--sf-h7`	`68rem`
`--sf-h8`	`72rem`
`--sf-h9`	`76rem`
`--sf-i0`	`80rem`
`--sf-i1`	`88rem`
`--sf-i2`	`96rem`
`--sf-i3`	`104rem`
`--sf-i4`	`112rem`
`--sf-i5`	`120rem`
`--sf-i6`	`128rem`
`--sf-i7`	`136rem`
`--sf-i8`	`144rem`
`--sf-i9`	`152rem`

В CSS косую черту в имени экранируют: var(--sf-space-1\/4).

Применение

Какую шкалу выбрать

Основная шкала m-0 … m-8 читает токены --sf-space-*. Они согласованы с p-*, gap-* и space-* и подрастают от ширины lg, поэтому интерфейс на широком экране получает больше воздуха без префиксов. Шаги шкалы на узком экране частично совпадают: 1/3 и 1/2, 2 и 3, 5 и 6 дают одинаковый отступ.

Фиксированная шкала (m-a0 … m-i9) нужна, когда отступ должен совпасть с размером из той же шкалы — шириной, высотой или радиусом — и не меняться с шириной экрана. У неё есть все стороны и отрицательные варианты, но нет осевых классов m-inline-* и m-block-*.

Стороны

Для отступа слева и справа используйте inline-start и inline-end, а не физические стороны: тогда разметка без правок работает в языках с письмом справа налево.

HTML

<div class="m-bottom-3">Абзац с отступом снизу</div>
<span class="m-inline-start-1">Иконка после текста</span>
<section class="m-block-4">Секция с отступами сверху и снизу</section>

Центрирование и прижатие к краю

HTML

<div class="w-f4 m-inline-auto">Блок по центру</div>

<div class="flex gap-1">
  <a href="#">Раздел</a>
  <a href="#">Раздел</a>
  <button type="button" class="m-inline-start-auto">Войти</button>
</div>

Отрицательный отступ

Отрицательный отступ вытягивает элемент за внутренний отступ родителя — например, изображение в карточке на всю ширину — или накладывает элементы друг на друга. Префикс ширины ставится перед минусом: md:-m-top-2.

HTML

<div class="p-3">
  <img class="-m-inline-3 -m-top-3" src="cover.jpg" alt="">
  <p>Текст карточки</p>
</div>

Ограничения

Классы -m-auto, -m-top-auto, -m-inline-auto и другие отрицательные auto есть в CSS, но их значение недопустимо, и браузер отбрасывает объявление: отступ получается нулевым. Не используйте их.
Вертикальные отступы соседних блоков в обычном потоке схлопываются: между ними остаётся больший из двух отступов, а не их сумма. Во флекс- и грид-контейнерах отступы не схлопываются.
У семейств нет префиксов состояния: hover:m-1 и подобные классы не существуют.

Навигация

Главное

Документация

Содержание

Внешний отступ

Пример

Шкала отступов

Одна сторона или ось

Начало и конец строки

Отрицательный отступ

Автоматический отступ

Фиксированная шкала

Ширина экрана

Классы

Переменные

Применение

Какую шкалу выбрать

Стороны

Центрирование и прижатие к краю

Отрицательный отступ

Ограничения

См. также

Settings