Spacing
Utility that serves to give the element spaced through the margins (margin) and paddings (paddings).
In unkuna the following notations are used to create margins and paddings on the sides of the element, in different sizes.
Unkuna uses the following notation:
Property:
| Prefix | Description |
|---|---|
| m | Margin abbreviation |
| p | Padding abbreviation |
Sides:
| Prefix | Description |
|---|---|
| r | Abbreviation for right side. |
| l | Abbreviation for left side. |
| t | Abbreviation for top side. |
| b | Abbreviation for bottom side. |
| x | Abbreviation for the sides of the x-axis (left and right). |
| y | Abbreviation for the sides of the y-axis (top and bottom). |
Size:
| Prefix | Description |
|---|---|
| small | Assign a size of 0.5rem for the margin or padding, as used. |
| medium | Assign a size of 1rem for the margin or padding, as used. |
| large | Assign a size of 1.5rem for the margin or padding, as used. |
Margins
Use
- You must combine the prefixes explained above according to the need of your design.
<div class="nkn-mr-medium"> </div> Where:
m: Margin
r: side (right)
medium: Size of 1 rem
Small margin example
HTML Snippet
Average margin example
HTML Snippet
Large margin example
HTML Snippet
Padding
Use
- You must combine the prefixes explained above according to the need of your design.
<div class="nkn-px-large"> </div> Where:
p: Padding
x: Axis x (right and left sides)
large: 1.5 rem size