## slim.

Katherine

###### Padding Utilities

Setting A Padding

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

.pd-r-30
.pd-r-50

Class Reference

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 Reference

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)