Slate provides space units used throughout in many places.
:root {
--space: 1em;
--space-xxxxs: calc(0.125 * var(--space));
--space-xxxs: calc(0.25 * var(--space));
--space-xxs: calc(0.375 * var(--space));
--space-xs: calc(0.5 * var(--space));
--space-s: calc(0.75 * var(--space));
--space-m: calc(1.25 * var(--space));
--space-l: calc(2 * var(--space));
--space-xl: calc(3.25 * var(--space));
--space-xxl: calc(5.25 * var(--space));
--space-xxxl: calc(8.5 * var(--space));
--space-xxxxl: calc(13.75 * var(--space));
}
Space units are extended with helper classes for adjust spacing along with using them for margin and padding.
To adjust the space inside or on an element, use the space-(size) classes and the space unit willl adjust for the element.
Padding with space--xxxl
| Class | Description |
|---|---|
| .p | padding: var(--space) |
| .px | padding: 0 var(--space) |
| .py | padding: var(--space) 0 |
| .pl | padding-left: var(--space) |
| .pr | padding-right: var(--space) |
| .pt | padding-top: var(--space) |
| .pb | padding-bottom: var(--space) |
Size variants exists all the way from 2 - 12 which is a straight multiplication of the var(--space) unit
| Class | Description |
|---|---|
| .p-2 | padding: calc( 2 * var(--space) ) |
| ... | |
| .p-12 | padding: calc( 12 * var(--space) ) |
| Class | Description |
|---|---|
| .m | margin: var(--space) |
| .mx | margin: 0 var(--space) |
| .mx-auto | margin-left: var(--space); margin-right: var(--space) |
| .my | margin: var(--space) 0 |
| .my-auto | margin-top: var(--space); margin-bottom: var(--space) |
| .ml | margin-left: var(--space) |
| .mr | margin-right: var(--space) |
| .mt | margin-top: var(--space) |
| .mb | margin-bottom: var(--space) |
Size variants exists all the way from 2 - 12 which is a straight multiplication of the var(--space) unit
| Class | Description |
|---|---|
| .m-2 | margin: calc( 2 * var(--space) ) |
| ... | |
| .m-12 | margin: calc( 12 * var(--space) ) |