## slim.

Katherine

###### Margin Utilities

Setting A Margin

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

.mg-l-20
.mg-l-40

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)

Media Query Margin

You can also set a margin to a different media query using the following utilities classes.

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)

Margin Auto

You can also set a 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