css-utils-margin
Immutable, CSS margin utilities.
Naming Convention
Due to the ubiquitous nature of setting margin, these utilities use a shorthand naming convention.
Shorthand | Description |
---|---|
m | Margin |
t | Top |
r | Right |
b | Bottom |
l | Left |
x | XAxis (left and right) |
y | YAxis (top and bottom) |
n | Negative |
0 | 0 reset |
1 | --space-1 (default 0.5rem) |
2 | --space-2 (default 1rem) |
3 | --space-3 (default 2rem) |
4 | --space-4 (default 4rem) |
Change or reset default margins using the white space scale. Negative u-xAxis margins are used to offset margins and padding of child elements. Margin auto is used to horizontally center block-level elements with a set width.
Resetting Margins
To increase information density and to better align elements, remove default margins from typographic elements using the margin utilities.
No marginNo margin topNo margin bottom
Add Spacing
Add spacing around elements using a combination of margin utilities.
Hamburger Hamburger Hamburger
The negative margin utilities also work with padded children.
Padded div
Center Elements
Block elements with a set width can be centered with .u-mxAuto
.
Credits
This utility is heavily inspired by Basscss and SuitCSS. This repository is merely a combining of great principles championed by each.