- There are 504 margin classes that you can use to space out your elements at every breakpoints.
- The default classes scale down automatically, but you have the option to override that scale with a breakpoint combo class.
- Margin classes use a sizing scale ranging from 1 - 48.
- Every point on the scale = 0.25rem, or 4px.
- So a class of
Margin 6
would be 6 * 0.25, or 1.5rem / 24px.
- Px sizes based on 16px root font.
Naming conventions
Margin {size}
- All sides
Margin Top {size}
Margin Bottom {size}
Margin Left {size}
Margin Right {size}
Margin X {size}
- Horizontal
Margin Y {size}
- Vertical
Sizes + scale