Padding
Use padding utilities to quickly style the padding of an element. Great for cards, buttons, or any other element.
Set a Padding
You can set a padding to an element instantly by using the following utilities classes.
.pd-l-30
.pd-l-50
<div class="pd-l-30">...</div>
<div class="pd-l-50">...</div>| Smaller Padding | Value |
|---|---|
|
.pd-t-[value] .pd-r-[value] .pd-b-[value] .pd-l-[value] |
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| Bigger Padding | Value |
|---|---|
|
.pd-t-[value] .pd-r-[value] .pd-b-[value] .pd-l-[value] |
15 | 20 | 25 | 30 | ... | 120 (step of 5) |
| Even Bigger Padding | Value |
|---|---|
|
.pd-t-[value] .pd-r-[value] .pd-b-[value] .pd-l-[value] |
110 | 120 | 130 | 140 | ... | 200 (step of 10) |
Media Query Padding
You can also set a padding to a different media query using the following utilities classes.
| Class | Value |
|---|---|
|
.pd-[size]-t-[value] .pd-[size]-r-[value] .pd-[size]-b-[value] .pd-[size]-l-[value] |
size: xs | sm | md | lg | xl value: the padding value (refer to code above) |