Use margin utilities to quickly set a margin of an element.
You can set a margin to an element instantly by using the following utilities classes.
Class Reference
| Smaller Margin | Value |
|---|---|
.mg-t-[value].mg-r-[value].mg-b-[value].mg-l-[value]
|
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| Bigger Margin | Value |
|---|---|
.mg-t-[value].mg-r-[value].mg-b-[value].mg-l-[value]
|
15 | 20 | 25 | 30 | ... | 120 (step of 5) |
You can also set a margin to a different media query using the following utilities classes.
Sample Code
<div class="mg-t-50 mg-md-t-60 mg-lg-t-100"></div>Class Reference
| Class | Value |
|---|---|
.mg-[size]-t-[value].mg-[size]-r-[value].mg-[size]-b-[value].mg-[size]-l-[value]
|
size: xs | sm | md | lg | xl value: the margin value (refer to code above) |
You can set an auto margin to a different media query using the following utilities classes.
Class Reference
| Class | Value |
|---|---|
.mg-t-auto |
Set a top margin to auto |
.mg-r-auto |
Set a right margin to auto |
.mg-b-auto |
Set a bottom margin to auto |
.mg-l-auto |
Set a left margin to auto |