Spacing
Spacing
In the var.css file, you can find the spacing values that can be used directly in CSS, for example, "padding: var(--spacing-xs). Below you can check the values for the specific spacing variables.
| Variable | Rem | Px | Padding and margin classes |
|---|---|---|---|
--spacing-none |
0 | 0 | pa0 / ma0 |
--spacing-xxxs |
0.125rem | 2px | pa1 / ma1 |
--spacing-xxs |
0.25rem | 4px | pa2 / ma2 |
--spacing-xs |
0.375rem | 6px | pa3 / ma3 |
--spacing-s |
0.5rem | 8px | pa4 / ma4 |
--spacing-m |
0.625rem | 10rem | pa5 / ma5 |
--spacing-l |
0.75rem | 12px | pa6 / ma6 |
--spacing-xl |
0.875rem | 14px | pa7 / ma7 |
--spacing-xxl |
1rem | 16px | pa8 / ma8 |
--spacing-xxxl |
1.125rem | 18px | pa9 / ma9 |
We also have specific classes for set margin or padding using the measures set above.
We have a scale from 0 to 9. Examples:
| Class | Effect |
|---|---|
pa0 |
Sets padding of all sides to the value of --spacing-none from above |
pt1 |
Sets padding-top to the value of --spacing-xxxs from above |
pr2 |
Sets padding-right to the value of --spacing-xxs from above |
pb3 |
Sets padding-bottom to the value of --spacing-xs from above |
pl4 |
Sets padding-left to the value of --spacing-s from above |
ph5 |
Sets horizontal padding (left and right) to the value of --spacing-m from above |
pv6 |
Sets vertical padding (top and bottom) to the value of --spacing-l from above |
Classes for margins may be created in the similar way.
| Class | Effect |
|---|---|
ma0 |
Sets margin of all sides to the value of --spacing-none from above |
mt1 |
Sets margin-top to the value of --spacing-xxxs from above |
mr2 |
Sets margin-right to the value of --spacing-xxs from above |
mb3 |
Sets margin-bottom to the value of --spacing-xs from above |
ml4 |
Sets margin-left to the value of --spacing-s from above |
mh5 |
Sets horizontal margin (left and right) to the value of --spacing-m from above |
mv6 |
Sets vertical margin (top and bottom) to the value of --spacing-l from above |