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