Margin
The .margin-* classes add or modify the margin-block-start or margin-block-end property an element.
The class sizes correspond with their associated --size-* CSS variables.
margin-block-start
These classes modify space before an element on the block axis (above the element in a top-to-bottom language like English).
| Class | Size |
|---|---|
.margin-start-0 |
0 |
.margin-start-6xs |
0.125em |
.margin-start-5xs |
0.25em |
.margin-start-4xs |
0.5em |
.margin-start-3xs |
0.6875em |
.margin-start-2xs |
0.75em |
.margin-start-xs |
0.8125em |
.margin-start-s |
0.9375em |
.margin-start-m |
1em |
.margin-start-l |
1.0625em |
.margin-start-xl |
1.1875em |
.margin-start-2xl |
1.3125em |
.margin-start-3xl |
1.5em |
.margin-start-4xl |
1.75em |
.margin-start-5xl |
2em |
.margin-start-6xl |
3em |
.margin-start-space |
1.5em |
margin-block-end
These classes modify space after an element on the block axis (below the element in a top-to-bottom language like English).
| Class | Size |
|---|---|
.margin-end-0 |
0 |
.margin-end-6xs |
0.125em |
.margin-end-5xs |
0.25em |
.margin-end-4xs |
0.5em |
.margin-end-3xs |
0.6875em |
.margin-end-2xs |
0.75em |
.margin-end-xs |
0.8125em |
.margin-end-s |
0.9375em |
.margin-end-m |
1em |
.margin-end-l |
1.0625em |
.margin-end-xl |
1.1875em |
.margin-end-2xl |
1.3125em |
.margin-end-3xl |
1.5em |
.margin-end-4xl |
1.75em |
.margin-end-5xl |
2em |
.margin-end-6xl |
3em |
.margin-end-space |
1.5em |