## Margin

###### Set Margin

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

.mg-l-20 (or) .ms-2
.mg-l-40 (or) .ms-4

###### 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)
`.mt-[breakpoint]-[value] .me-[breakpoint]-[value] .mb-[breakpoint]-[value] .ms-[breakpoint]-[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` (or) `.mt-auto` | Set a top margin to auto
`.mg-r-auto` (or) `.me-auto` | Set a right margin to auto
`.mg-b-auto` (or) `.mb-auto` | Set a bottom margin to auto
`.mg-l-auto` (or) `.ms-auto` | Set a left margin to auto

##### Reynante

Web Developer

Verified
View Profile

##### Joyce Chua

Team Leader

Verified
View Profile