Immutable, CSS margin utilities.
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.
.u-m0 { margin: 0 } .u-mt0 { margin-top: 0 } .u-mr0 { margin-right: 0 } .u-mb0 { margin-bottom: 0 } .u-ml0 { margin-left: 0 } .u-mx0 { margin-left: 0; margin-right: 0 } .u-my0 { margin-top: 0; margin-bottom: 0 } .u-m1 { margin: var(--space-1) } .u-mt1 { margin-top: var(--space-1) } .u-mr1 { margin-right: var(--space-1) } .u-mb1 { margin-bottom: var(--space-1) } .u-ml1 { margin-left: var(--space-1) } .u-mx1 { margin-left: var(--space-1); margin-right: var(--space-1) } .u-my1 { margin-top: var(--space-1); margin-bottom: var(--space-1) } .u-m2 { margin: var(--space-2) } .u-mt2 { margin-top: var(--space-2) } .u-mr2 { margin-right: var(--space-2) } .u-mb2 { margin-bottom: var(--space-2) } .u-ml2 { margin-left: var(--space-2) } .u-mx2 { margin-left: var(--space-2); margin-right: var(--space-2) } .u-my2 { margin-top: var(--space-2); margin-bottom: var(--space-2) } .u-m3 { margin: var(--space-3) } .u-mt3 { margin-top: var(--space-3) } .u-mr3 { margin-right: var(--space-3) } .u-mb3 { margin-bottom: var(--space-3) } .u-ml3 { margin-left: var(--space-3) } .u-mx3 { margin-left: var(--space-3); margin-right: var(--space-3) } .u-my3 { margin-top: var(--space-3); margin-bottom: var(--space-3) } .u-m4 { margin: var(--space-4) } .u-mt4 { margin-top: var(--space-4) } .u-mr4 { margin-right: var(--space-4) } .u-mb4 { margin-bottom: var(--space-4) } .u-ml4 { margin-left: var(--space-4) } .u-mx4 { margin-left: var(--space-4); margin-right: var(--space-4) } .u-my4 { margin-top: var(--space-4); margin-bottom: var(--space-4) } .u-mxn1 { margin-left: -var(--space-1); margin-right: -var(--space-1); } .u-mxn2 { margin-left: -var(--space-2); margin-right: -var(--space-2); } .u-mxn3 { margin-left: -var(--space-3); margin-right: -var(--space-3); } .u-mxn4 { margin-left: -var(--space-4); margin-right: -var(--space-4); } .u-mlAuto { margin-left: auto } .u-mrAuto { margin-right: auto } .u-mxAuto { margin-left: auto; margin-right: auto; }
To increase information density and to better align elements, remove default margins from typographic elements using the margin utilities.
<h1 class="u-m0">No margin</h1> <h1 class="u-mt0">No margin top</h1> <h1 class="u-mb0">No margin bottom</h1>
Add spacing around elements using a combination of margin utilities.
<div class="u-mxn1"> <div class="u-m1">Hamburger</div> <div class="u-m1">Hamburger</div> <div class="u-m1">Hamburger</div> </div>
The negative margin utilities also work with padded children.
<div class="border"> <div class="u-mxn2"> <div class="u-px2 border">Padded div</div> </div> </div>
Block elements with a set width can be centered with .u-mxAuto.
<img src="http://d2v52k3cl9vedd.cloudfront.net/assets/images/placeholder-square.svg" width="96" height="96" class="block u-mxAuto" />
This utility is heavily inspired by Basscss and SuitCSS. This repository is merely a combining of great principles championed by each.