Margin and Padding
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:
mg Property 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 |
| Y Axis Margins | SpacingToken (e.g., d3) | mg-y:d2 (Applies to the Y axis only) |
| X Axis Margins | SpacingToken (e.g., d3) | mg-x:d2 (Applies to the X axis only) |
pd Property 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 |
| Y Axis Padding | SpacingToken (e.g., d3) | pd-y:d2 (Applies to the Y axis only) |
| X Axis Padding | SpacingToken (e.g., d3) | pd-x:d2 (Applies to the X axis only) |
Elevate also supports single directional variations for the mg and pd properties 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 |
