Spacing
To increase or decrease the space you need to modify the --p-s variable in :root (default value 1 rem)
| Property | Shortcuts | ||||||
|---|---|---|---|---|---|---|---|
padding |
.p-0 |
.p-1 |
.p-2 |
.p-3 |
.p-4 |
.p-5 |
.p-6 |
padding-top |
.pt-0 |
.pt-1 |
.pt-2 |
.pt-3 |
.pt-4 |
.pt-5 |
.pt-6 |
padding-bottom |
.pb-0 |
.pb-1 |
.pb-2 |
.pb-3 |
.pb-4 |
.pb-5 |
.pb-6 |
padding-left |
.ps-0 |
.ps-1 |
.ps-2 |
.ps-3 |
.ps-4 |
.ps-5 |
.ps-6 |
padding-right |
.pe-0 |
.pe-1 |
.pe-2 |
.pe-3 |
.pe-4 |
.pe-5 |
.pe-6 |
padding left & right |
.ph-0 |
.ph-1 |
.ph-2 |
.ph-3 |
.ph-4 |
.ph-5 |
.ph-6 |
padding top & bottom |
.pv-0 |
.pv-1 |
.pv-2 |
.pv-3 |
.pv-4 |
.pv-5 |
.pv-6 |
Dynamic spacing
Apply dynamic padding to all first-level children of the parent
| Property | Shortcuts | |||||
|---|---|---|---|---|---|---|
padding |
.p-1-auto |
.p-2-auto |
.p-3-auto |
.p-4-auto |
.p-5-auto |
.p-6-auto |
padding-top |
.pt-1-auto |
.pt-2-auto |
.pt-3-auto |
.pt-4-auto |
.pt-5-auto |
.pt-6-auto |
padding-bottom |
.pb-1-auto |
.pb-2-auto |
.pb-3-auto |
.pb-4-auto |
.pb-5-auto |
.pb-6-auto |
padding-left |
.ps-1-auto |
.ps-2-auto |
.ps-3-auto |
.ps-4-auto |
.ps-5-auto |
.ps-6-auto |
padding-right |
.pe-1-auto |
.pe-2-auto |
.pe-3-auto |
.pe-4-auto |
.pe-5-auto |
.pe-6-auto |
Auto spacing
Apply auto padding on each element
| Property | Shortcuts |
|---|---|
padding auto |
.p-auto |
padding-left auto |
.ps-auto |
padding-right auto |
.pe-auto |
horizontal padding 1/4 |
.ph-1-4 0.25 rem |
horizontal padding 1/2 |
.ph-1-2 0.50 rem |
horizontal padding 3/4 |
.ph-3-4 0.75 rem |
vertical padding 1/4 |
.pv-1-4 0.25 rem |
vertical padding 1/2 |
.pv-1-2 0.50 rem |
vertical padding 3/4 |
.pv-3-4 0.75 rem |