PADDING
Set padding
You can set a padding to an item using the following helpful classes.
.pl-15
.pt-15
Small
| Position | Class | Value |
|---|---|---|
|
Top Right Bottom Left |
.pt-[value] .pr-[value] .pb-[value] .pl-[value]
|
0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
Medium
| Position | Class | Value |
|---|---|---|
|
Top Right Bottom Left |
.pt-[value] .pr-[value] .pb-[value] .pl-[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 |
.pt-[value] .pr-[value] .pb-[value] .pl-[value]
|
120 | 140 | 160 | 180 | 200 | 25 | 300 | 400 | 500 |
X/Y padding
Set padding
With the following classes, you can easily give the top, bottom and left, right padding according to the x / y coordinates.
.px-15
.py-5
Small
| Position | Class | Value |
|---|---|---|
|
Top - Bottom Left - Right |
.py-[value] .px-[value]
|
0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
Medium
| Position | Class | Value |
|---|---|---|
|
Top - Bottom Left - Right |
.py-[value] .px-[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 |
.py-[value] .px-[value]
|
120 | 140 | 160 | 180 | 200 | 25 | 300 | 400 | 500 |