Projects

#### Paddning Values

Padding Positions
.p-1
.ps-1
.pe-1
.pt-1
.pb-1
.px-1
.py-1

Class | Description
--- | ---
`class="p-1"` | Add padding all sides to element.
`class="ps-1"` | Add padding left side to element.
`class="pe-1"` | Add padding right side to element.
`class="pt-1"` | Add padding top side to element.
`class="pb-1"` | Add padding bottom side to element.
`class="px-1"` | Add padding horizonatl sides to element.
`class="py-1"` | Add padding vertical sides to element.

Padding values
.p-1
.p-2
.p-3
.p-4
.p-5
.p-6

Class | Description
--- | ---
`class="p-1"` | Add padding p-1 to element.
`class="p-2"` | Add padding p-2 to element.
`class="p-3"` | Add padding p-3 to element.
`class="p-4"` | Add padding p-4 to element.
`class="p-5"` | Add padding p-5 to element.
`class="p-6"` | Add padding p-6 to element.
`class="p-7"` | Add padding p-7 to element.
`class="p-8"` | Add padding p-8 to element.

Remove Padding
.p-0
.ps-0
.pe-0
.pt-0
.pb-0
.px-0
.py-0

Class | Description
--- | ---
`class="p-0"` | Remove padding all sides to element.
`class="ps-0"` | Remove padding left side to element.
`class="pe-0"` | Remove padding right side to element.
`class="pt-0"` | Remove padding top side to element.
`class="pb-0"` | Remove padding bottom side to element.
`class="px-0"` | Remove padding horizonatl sides to element.
`class="py-0"` | Remove padding vertical sides to element.

Media Query Padding

Class | Value
--- | ---
`.pt-[size]-[value]` `.pb-[size]-[value]` `.pe-[size]-[value]` `.ps-[size]-[value]` | size: xs | sm | md | lg | xl value: the padding value (refer to code above)