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