margin

Примеры

Базовый пример

Используйте утилиты m-<number> такие как m-4 и m-8 для управления внешними отступами со всех сторон элемента:

<div class="m-8 ...">m-8</div>

Добавление внешнего отступа к одной стороне

Используйте утилиты mt-<number>, mr-<number>, mb-<number> и ml-<number> такие как ml-2 и mt-6 для управления внешним отступом с одной стороны элемента:

<div class="mt-6 ...">mt-6</div><div class="mr-4 ...">mr-4</div><div class="mb-8 ...">mb-8</div><div class="ml-2 ...">ml-2</div>

Добавление горизонтального внешнего отступа

Используйте утилиты mx-<number> такие как mx-4 и mx-8 для управления горизонтальными внешними отступами элемента:

<div class="mx-8 ...">mx-8</div>

Добавление вертикального внешнего отступа

Используйте утилиты my-<number> такие как my-4 и my-8 для управления вертикальными внешними отступами элемента:

<div class="my-8 ...">my-8</div>

Использование отрицательных значений

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

<div class="h-16 w-36 bg-sky-400 opacity-20 ..."></div><div class="-mt-8 bg-sky-300 ...">-mt-8</div>

Использование логических свойств

Используйте утилиты ms-<number> или me-<number> такие как ms-4 и me-8 для установки логических свойств margin-inline-start и margin-inline-end:

<div>  <div dir="ltr">    <div class="ms-8 ...">ms-8</div>    <div class="me-8 ...">me-8</div>  </div>  <div dir="rtl">    <div class="ms-8 ...">ms-8</div>    <div class="me-8 ...">me-8</div>  </div></div>

Добавление пространства между дочерними элементами

Используйте утилиты space-x-<number> или space-y-<number> такие как space-x-4 и space-y-8 для управления пространством между элементами:

<div class="flex space-x-4 ...">  <div>01</div>  <div>02</div>  <div>03</div></div>

Изменение порядка дочерних элементов

Если ваши элементы находятся в обратном порядке (используя, например, flex-row-reverse или flex-col-reverse), используйте утилиты space-x-reverse или space-y-reverse, чтобы убедиться, что пространство добавляется к правильной стороне каждого элемента:

<div class="flex flex-row-reverse space-x-4 space-x-reverse ...">  <div>01</div>  <div>02</div>  <div>03</div></div>

Ограничения

Утилиты пространства - это просто сокращение для добавления внешнего отступа ко всем элементам, кроме последнего в группе, и они не предназначены для обработки сложных случаев, таких как сетки, макеты с переносом или ситуации, когда дочерние элементы отображаются в сложном пользовательском порядке, а не в их естественном порядке DOM.

Для таких ситуаций лучше использовать утилиты gap когда это возможно, или добавить внешний отступ к каждому элементу с соответствующим отрицательным внешним отступом на родительском элементе.

Кроме того, утилиты пространства не предназначены для работы вместе с утилитами divide. Для таких ситуаций рассмотрите возможность добавления утилит внешнего/внутреннего отступа к дочерним элементам вместо этого.

Использование пользовательского значения

Используйте такие утилиты, как m-[<value>],mx-[<value>], and mb-[<value>], чтобы задать margin на основе полностью пользовательского значения:

<div class="m-[5px] ...">  <!-- ... --></div>

Для переменных CSS вы также можете использовать синтаксис: m-(<custom-property>)

<div class="m-(--my-margin) ...">  <!-- ... --></div>

Это просто сокращение, m-[var(<custom-property>)] которое автоматически добавляет функцию var().

Адаптивный дизайн

Префикс a margin утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:

<div class="mt-4 md:mt-8 ...">  <!-- ... --></div>

Подробнее об использовании вариантов читайте в документации по вариантам.

Кастомизация вашей темы

Утилиты m-<number>,mx-<number>,my-<number>,ms-<number>,me-<number>,mt-<number>,mr-<number>,mb-<number>, and ml-<number> управляются переменной темы --spacing, которую можно настроить в вашей собственной теме:

@theme {  --spacing: 1px; }

Подробнее о настройке шкалы интервалов читайте в документации по переменным темы.