Espaciado
Utilidad que sirve para dar al elemento espaciado a través de los márgenes (margin) y rellenos (paddings).
En unkuna se hace uso de las siguientes notaciones para crear margins y paddings en los lados del elemento, en diferentes tamaños.
Unkuna utiliza la siguiente notación:
Propiedad:
| Prefijo | Descripción |
|---|---|
| m | Abreviatura de margin |
| p | Abreviatura de padding |
Lados:
| Prefijo | Descripción |
|---|---|
| r | Abreviatura del lado right. |
| l | Abreviatura del lado left. |
| t | Abreviatura del lado top. |
| b | Abreviatura del lado bottom. |
| x | Abreviatura de los lados del eje x (left y right). |
| y | Abreviatura de los lados del eje y (top y bottom). |
Tamaño:
| Prefijo | Descripción |
|---|---|
| small | Asigna un tamaño de 0.5rem para el margin o padding, según se use. |
| medium | Asigna un tamaño de 1rem para el margin o padding, según se use. |
| large | Asigna un tamaño de 1.5rem para el margin o padding, según se use. |
Márgenes
Uso
- Debes de combinar los prefijos explicados anteriormente de acuerdo a la necesidad de su diseño.
<div class="nkn-mr-medium"> </div> Donde:
m: Margen
r: lado (right)
medium: Tamaño de 1 rem
Ejemplo margen pequeño
Snippet HTML
Ejemplo margen medio
Snippet HTML
Ejemplo margen largo
Snippet HTML
Relleno
Uso
- Debes de combinar los prefijos explicados anteriormente de acuerdo a la necesidad de su diseño.
<div class="nkn-px-large"> </div> Donde:
p: Relleno
x: Eje x (lados right y left)
large: Tamaño de 1.5 rem