Внешний отступ
margin
sm
md
lg
xl
В SIMAI Framework с помощью адаптивных размеров можно задать внешний отступ.
Классы
| Класс | Значение |
|---|---|
m-0 |
margin: var(--sf-space--size-0); |
m-top-0 |
margin-top: var(--sf-space--size-0); |
m-right-0 |
margin-right: var(--sf-space--size-0); |
m-bottom-0 |
margin-bottom: var(--sf-space--size-0); |
m-left-0 |
margin-left: var(--sf-space--size-0); |
m-1 |
margin: var(--sf-space--size-1); |
m-top-1 |
margin-top: var(--sf-space--size-1); |
m-right-1 |
margin-right: var(--sf-space--size-1); |
m-bottom-1 |
margin-bottom: var(--sf-space--size-1); |
m-left-1 |
margin-left: var(--sf-space--size-1); |
m-2 |
margin: var(--sf-space--size-2); |
m-top-2 |
margin-top: var(--sf-space--size-2); |
m-right-2 |
margin-right: var(--sf-space--size-2); |
m-bottom-2 |
margin-bottom: var(--sf-space--size-2); |
m-left-2 |
margin-left: var(--sf-space--size-2); |
m-3 |
margin: var(--sf-space--size-3); |
m-top-3 |
margin-top: var(--sf-space--size-3); |
m-right-3 |
margin-right: var(--sf-space--size-3); |
m-bottom-3 |
margin-bottom: var(--sf-space--size-3); |
m-left-3 |
margin-left: var(--sf-space--size-3); |
m-4 |
margin: var(--sf-space--size-4); |
m-top-4 |
margin-top: var(--sf-space--size-4); |
m-right-4 |
margin-right: var(--sf-space--size-4); |
m-bottom-4 |
margin-bottom: var(--sf-space--size-4); |
m-left-4 |
margin-left: var(--sf-space--size-4); |
m-5 |
margin: var(--sf-space--size-5); |
m-top-5 |
margin-top: var(--sf-space--size-5); |
m-right-5 |
margin-right: var(--sf-space--size-5); |
m-bottom-5 |
margin-bottom: var(--sf-space--size-5); |
m-left-5 |
margin-left: var(--sf-space--size-5); |
m-6 |
margin: var(--sf-space--size-6); |
m-top-6 |
margin-top: var(--sf-space--size-6); |
m-right-6 |
margin-right: var(--sf-space--size-6); |
m-bottom-6 |
margin-bottom: var(--sf-space--size-6); |
m-left-6 |
margin-left: var(--sf-space--size-6); |
m-7 |
margin: var(--sf-space--size-7); |
m-top-7 |
margin-top: var(--sf-space--size-7); |
m-right-7 |
margin-right: var(--sf-space--size-7); |
m-bottom-7 |
margin-bottom: var(--sf-space--size-7); |
m-left-7 |
margin-left: var(--sf-space--size-7); |
m-8 |
margin: var(--sf-space--size-8); |
m-top-8 |
margin-top: var(--sf-space--size-8); |
m-right-8 |
margin-right: var(--sf-space--size-8); |
m-bottom-8 |
margin-bottom: var(--sf-space--size-8); |
m-left-8 |
margin-left: var(--sf-space--size-8); |
m-9 |
margin: var(--sf-space--size-9); |
m-top-9 |
margin-top: var(--sf-space--size-9); |
m-right-9 |
margin-right: var(--sf-space--size-9); |
m-bottom-9 |
margin-bottom: var(--sf-space--size-9); |
m-left-9 |
margin-left: var(--sf-space--size-9); |
m-auto |
margin: auto; |
m-top-auto |
margin-top: auto; |
m-right-auto |
margin-right: auto; |
m-bottom-auto |
margin-bottom: auto; |
m-left-auto |
margin-left: auto; |
-m-0 |
margin: calc(0rem - var(--sf-space--size-0);; |
-m-top-0 |
margin-top:: calc(0rem - var(--sf-space--size-0); |
-m-right-0 |
margin-right:: calc(0rem - var(--sf-space--size-0); |
-m-bottom-0 |
margin-bottom:: calc(0rem - var(--sf-space--size-0); |
-m-left-0 |
margin-left:: calc(0rem - var(--sf-space--size-0); |
-m-1 |
margin: calc(0rem - var(--sf-space--size-1);; |
-m-top-1 |
margin-top:: calc(0rem - var(--sf-space--size-1); |
-m-right-1 |
margin-right:: calc(0rem - var(--sf-space--size-1); |
-m-bottom-1 |
margin-bottom:: calc(0rem - var(--sf-space--size-1); |
-m-left-1 |
margin-left:: calc(0rem - var(--sf-space--size-1); |
-m-2 |
margin: calc(0rem - var(--sf-space--size-2);; |
-m-top-2 |
margin-top:: calc(0rem - var(--sf-space--size-2); |
-m-right-2 |
margin-right:: calc(0rem - var(--sf-space--size-2); |
-m-bottom-2 |
margin-bottom:: calc(0rem - var(--sf-space--size-2); |
-m-left-2 |
margin-left:: calc(0rem - var(--sf-space--size-2); |
-m-3 |
margin: calc(0rem - var(--sf-space--size-3);; |
-m-top-3 |
margin-top:: calc(0rem - var(--sf-space--size-3); |
-m-right-3 |
margin-right:: calc(0rem - var(--sf-space--size-3); |
-m-bottom-3 |
margin-bottom:: calc(0rem - var(--sf-space--size-3); |
-m-left-3 |
margin-left:: calc(0rem - var(--sf-space--size-3); |
-m-4 |
margin: calc(0rem - var(--sf-space--size-4);; |
-m-top-4 |
margin-top:: calc(0rem - var(--sf-space--size-4); |
-m-right-4 |
margin-right:: calc(0rem - var(--sf-space--size-4); |
-m-bottom-4 |
margin-bottom:: calc(0rem - var(--sf-space--size-4); |
-m-left-4 |
margin-left:: calc(0rem - var(--sf-space--size-4); |
-m-5 |
margin: calc(0rem - var(--sf-space--size-5);; |
-m-top-5 |
margin-top:: calc(0rem - var(--sf-space--size-5); |
-m-right-5 |
margin-right:: calc(0rem - var(--sf-space--size-5); |
-m-bottom-5 |
margin-bottom:: calc(0rem - var(--sf-space--size-5); |
-m-left-5 |
margin-left:: calc(0rem - var(--sf-space--size-5); |
-m-6 |
margin: calc(0rem - var(--sf-space--size-6);; |
-m-top-6 |
margin-top:: calc(0rem - var(--sf-space--size-6); |
-m-right-6 |
margin-right:: calc(0rem - var(--sf-space--size-6); |
-m-bottom-6 |
margin-bottom:: calc(0rem - var(--sf-space--size-6); |
-m-left-6 |
margin-left:: calc(0rem - var(--sf-space--size-6); |
-m-7 |
margin: calc(0rem - var(--sf-space--size-7);; |
-m-top-7 |
margin-top:: calc(0rem - var(--sf-space--size-7); |
-m-right-7 |
margin-right:: calc(0rem - var(--sf-space--size-7); |
-m-bottom-7 |
margin-bottom:: calc(0rem - var(--sf-space--size-7); |
-m-left-7 |
margin-left:: calc(0rem - var(--sf-space--size-7); |
-m-8 |
margin: calc(0rem - var(--sf-space--size-8);; |
-m-top-8 |
margin-top:: calc(0rem - var(--sf-space--size-8); |
-m-right-8 |
margin-right:: calc(0rem - var(--sf-space--size-8); |
-m-bottom-8 |
margin-bottom:: calc(0rem - var(--sf-space--size-8); |
-m-left-8 |
margin-left:: calc(0rem - var(--sf-space--size-8); |
-m-9 |
margin: calc(0rem - var(--sf-space--size-9);; |
-m-top-9 |
margin-top:: calc(0rem - var(--sf-space--size-9); |
-m-right-9 |
margin-right:: calc(0rem - var(--sf-space--size-9); |
-m-bottom-9 |
margin-bottom:: calc(0rem - var(--sf-space--size-9); |
-m-left-9 |
margin-left:: calc(0rem - var(--sf-space--size-9); |
Описание
Адаптивный модификатор. Изменяет внешний отступ в зависимости от размера области просмотра.
Использование модификатора: {контрольная точка}:m-{сторона}-{значение}
- Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (
sm,md,lg,xl). Если контрольная точка не задана, то действует для любого размера области просмотра. - Сторона. Необязательный параметр. Может принимать значения:
top- верхняя сторона;right- правая сторона;bottom- нижняя сторона;left- левая сторона;
- Значение. Обязательный параметр. Может принимать значения:
1...9- для высоты используются адаптивные размеры отступов;auto- автоматическое значение;0- отступ равен нулю.
Односторонний отступ
С помощью модификатора m-{top|right|bottom|left}-{0...9} можно задать внешний отступ с любой стороны элемента.
m-top-6
m-right-4
m-bottom-8
m-left-2
<div class="m-top-6"></div>
<div class="m-right-4"></div>
<div class="m-bottom-8"></div>
<div class="m-left-2"></div>
Отступ по горизонтали
С помощью модификатора m-left-{0...9} и m-right-{0...9} можно задать внешний отступ по горизонтали.
p-right-8 p-left-8
<div class="m-right-8 m-left-8"></div>
Отступ по вертикали
С помощью модификатора m-top-{0...9} и m-bottom-{0...9} можно задать внешний отступ по вертикали.
p-top-8 p-bottom-8
<div class="m-top-8 m-bottom-8"></div>
Отступ со всех сторон
С помощью модификатора m-{0...9} можно задать внешний отступ со всех сторон.
m-8
<div class="m-8"></div>
Отрицательный отступ
С помощью модификаторов m-{0...9} и m-{top|right|bottom|left}-{0...9} можно задать отрицательный отступ.
-m-top-8
<div class="w-e5 h-e1 bg-info ..."></div>
<div class="-m-top-8 bg-blue-5 ...">-m-top-8</div>
Адаптивность
Для установки внешнего отступа, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к любому модификатору внешнего отступа.
Например, используйте модификатор md:m-8 для установки 8-го отступа для экранов размером Medium и больше.
<div class="md:m-8"></div>
Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.