MARGIN
Set Margin
You can set a margin to an item using the following helpful classes.
.mr-10
.mt-15
.ml-10
Small
| Position | Class | Value |
|---|---|---|
|
Top Right Bottom Left |
.mt-[value] .mr-[value] .mb-[value] .ml-[value]
|
0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
Medium
| Position | Class | Value |
|---|---|---|
|
Top Right Bottom Left |
.mt-[value] .mr-[value] .mb-[value] .ml-[value]
|
15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 55 | 60 | 65 | 70 | 75 | 80 | 85 | 90 | 95 | 100 |
Large
| Position | Class | Value |
|---|---|---|
|
Top Right Bottom Left |
.mt-[value] .mr-[value] .mb-[value] .ml-[value]
|
120 | 140 | 160 | 180 | 200 | 25 | 300 | 400 | 500 |
X/Y MARGIN
Set Margin
With the following classes, you can easily give the top, bottom and left, right margin according to the x / y coordinates.
.my-20
.mx-20
Small
| Position | Class | Value |
|---|---|---|
|
Top - Bottom Left - Right |
.my-[value] .mx-[value]
|
0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
Medium
| Position | Class | Value |
|---|---|---|
|
Top - Bottom Left - Right |
.my-[value] .mx-[value]
|
15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 55 | 60 | 65 | 70 | 75 | 80 | 85 | 90 | 95 | 100 |
Large
| Position | Class | Value |
|---|---|---|
|
Top - Bottom Left - Right |
.my-[value] .mx-[value]
|
120 | 140 | 160 | 180 | 200 | 25 | 300 | 400 | 500 |