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