Margin

Use margin utilities to quickly style the margin of an element. Great for cards, buttons, or any other element.


Set a Margin

You can set a margin to an element instantly by using the following utilities classes.

.mg-l-20
.mg-l-40
<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)

Media Query Margin

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)


Auto Margin

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