Margin and Padding Modifiers
The margin (abbreviated as mg) and padding (abbreviated as pd) properties support various spacing configurations. You can use spacing tokens to define the values, with the following syntax:
Margin Modifiers
| Modifier | Expected Values | Example |
|---|
| Margin Values (All Sides) | SpacingToken (e.g., d3) | mg:d2 |
| (X/Y) | SpacingToken (e.g., d3) | mg:d2:d3 (First value applies to the X axis and second value applies to the Y axis) |
| (Individual Sides) | SpacingToken (e.g., d3) | mg:d2:d3:d4:d5 |
Padding Modifiers
| Modifier | Expected Values | Example |
|---|
| Padding Values (All Sides) | SpacingToken (e.g., d3) | pd:d2 |
| (X/Y) | SpacingToken (e.g., d3) | pd:d2:d3 (First value applies to the X axis and second value applies to the Y axis) |
| (Individual Sides) | SpacingToken (e.g., d3) | pd:d2:d3:d4:d5 |
Elevate also supports single directional properties for margin and padding such as:
| Single Directional Properties | Expected Values | Example |
|---|
| pd-t | SpacingToken (e.g., d3) | pd-t:d2 |
| pd-b | SpacingToken (e.g., d3) | pd-b:d2 |
| pd-l | SpacingToken (e.g., d3) | pd-l:d2 |
| pd-r | SpacingToken (e.g., d3) | pd-r:d2 |
| mg-t | SpacingToken (e.g., d3) | mg-t:d2 |
| mg-b | SpacingToken (e.g., d3) | mg-b:d2 |
| mg-l | SpacingToken (e.g., d3) | mg-l:d2 |
| mg-r | SpacingToken (e.g., d3) | mg-r:d2 |
