Use margin utilities to quickly style the margin of an element. Great for cards, buttons, or any other element.
You can set a margin to an element instantly by using the following utilities classes.
<div class="wd-150 ht-80 bg-gray-400"></div>
<div class="wd-150 ht-80 bg-gray-400 mg-l-20">.mg-l-20</div>
<div class="wd-150 ht-80 bg-gray-400 mg-l-40">.mg-l-40</div>| 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.
| Class | Value |
|---|---|
|
.mg-[breakpoint]-t-[value] .mg-[breakpoint]-r-[value] .mg-[breakpoint]-b-[value] .mg-[breakpoint]-l-[value] |
breakpoint: xs | sm | md | lg | xl value: the margin value (refer to code above) |
You can also set a margin to a different media query using the following utilities classes.
| 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 |