Padding Utilities
Padding utilities in NuvoUI help you add space inside elements, creating room between the element's border and its content.
Configuration
The padding utilities are built on configurable variables:
Parent Selector
All padding utilities are scoped under the VAR.$parent-selector which can be configured:
Utility Class Generation
Padding utility classes are only generated if VAR.$generate-utility-classes is set to true:
Padding All Sides
Add equal padding on all sides using the .p-{size} utility:
Horizontal and Vertical Padding
Control horizontal and vertical padding independently:
Individual Side Padding
Apply padding to specific sides using directional utilities:
Padding Within Container Elements
Create space around content in container elements:
Responsive Padding
Apply different padding at different breakpoints:
Combining with Other Utilities
Padding utilities work well with other utility classes:
Common Use Cases
Button Padding
Form Control Padding
Card and Panel Layouts
Visual Padding Comparison
See how different padding sizes affect your elements:
Padding Utilities Reference Table
All Sides Padding Classes
| Class | CSS Property | Description |
|---|---|---|
.p-0 | padding: 0 | No padding |
.p-1 | padding: 0.25rem | Extra small padding (4px) |
.p-2 | padding: 0.5rem | Small padding (8px) |
.p-3 | padding: 0.75rem | Medium small padding (12px) |
.p-4 | padding: 1rem | Medium padding (16px) |
.p-5 | padding: 1.25rem | Medium large padding (20px) |
.p-6 | padding: 1.5rem | Large padding (24px) |
.p-8 | padding: 2rem | Extra large padding (32px) |
.p-10 | padding: 2.5rem | 2x large padding (40px) |
.p-12 | padding: 3rem | 3x large padding (48px) |
.p-16 | padding: 4rem | 4x large padding (64px) |
.p-20 | padding: 5rem | 5x large padding (80px) |
.p-24 | padding: 6rem | 6x large padding (96px) |
.p-32 | padding: 8rem | 8x large padding (128px) |
Horizontal and Vertical Padding Classes
| Class | CSS Property | Description |
|---|---|---|
.px-0 to .px-32 | padding-left; padding-right | Horizontal padding |
.py-0 to .py-32 | padding-top; padding-bottom | Vertical padding |
Individual Side Padding Classes
| Class | CSS Property | Description |
|---|---|---|
.pt-0 to .pt-32 | padding-top | Top padding |
.pr-0 to .pr-32 | padding-right | Right padding |
.pb-0 to .pb-32 | padding-bottom | Bottom padding |
.pl-0 to .pl-32 | padding-left | Left padding |
Responsive Classes
Add @{breakpoint} suffix to any padding class for responsive behavior:
.p-4@sm.px-6@md.pt-8@lg.py-4@xl
SCSS Mixins
NuvoUI provides a comprehensive set of padding mixins for use in your SCSS:
Padding Mixins
| Mixin | Parameters | Description |
|---|---|---|
@include p($val) | $val: Padding value | Sets padding on all sides |
@include px($val) | $val: Padding value | Sets left and right padding |
@include py($val) | $val: Padding value | Sets top and bottom padding |
@include pt($val) | $val: Padding value | Sets top padding |
@include pr($val) | $val: Padding value | Sets right padding |
@include pb($val) | $val: Padding value | Sets bottom padding |
@include pl($val) | $val: Padding value | Sets left padding |
Example SCSS Usage
Advanced Component Building
Use padding mixins to create consistent, reusable components: