Margin Utilities
Margin utilities in NuvoUI help you control spacing outside elements. They're essential for controlling layout and spacing between components.
Configuration
The margin utilities are built on configurable variables:
Parent Selector
All margin utilities are scoped under the VAR.$parent-selector which can be configured:
Utility Class Generation
Margin utility classes are only generated if VAR.$generate-utility-classes is set to true:
Margin All Sides
Add equal margin on all sides of an element with the .m-{size} utility:
Horizontal and Vertical Margins
Control horizontal and vertical margins independently:
Individual Side Margins
Apply margin to specific sides using directional utilities:
Auto Margins
Auto margins are useful for alignment and pushing elements apart:
Margin for Space Between Elements
Create consistent spacing between a group of elements:
Visual Margin Comparison
See how different margin sizes affect your elements:
Negative Margins
Though not included in the base framework, you can create negative margins in SCSS:
Responsive Margins
Apply different margins at different breakpoints:
Common Use Cases
Cards with Consistent Spacing
Spacing Between Form Elements
Content Sections with Proper Spacing
Margin Utilities Reference Table
All Sides Margin Classes
| Class | CSS Property | Description |
|---|---|---|
.m-0 | margin: 0 | No margin |
.m-1 | margin: 0.25rem | Extra small margin (4px) |
.m-2 | margin: 0.5rem | Small margin (8px) |
.m-3 | margin: 0.75rem | Medium small margin (12px) |
.m-4 | margin: 1rem | Medium margin (16px) |
.m-5 | margin: 1.25rem | Medium large margin (20px) |
.m-6 | margin: 1.5rem | Large margin (24px) |
.m-8 | margin: 2rem | Extra large margin (32px) |
.m-10 | margin: 2.5rem | 2x large margin (40px) |
.m-12 | margin: 3rem | 3x large margin (48px) |
.m-16 | margin: 4rem | 4x large margin (64px) |
.m-20 | margin: 5rem | 5x large margin (80px) |
.m-24 | margin: 6rem | 6x large margin (96px) |
.m-32 | margin: 8rem | 8x large margin (128px) |
Horizontal and Vertical Margin Classes
| Class | CSS Property | Description |
|---|---|---|
.mx-0 to .mx-32 | margin-left; margin-right | Horizontal margins |
.my-0 to .my-32 | margin-top; margin-bottom | Vertical margins |
Individual Side Margin Classes
| Class | CSS Property | Description |
|---|---|---|
.mt-0 to .mt-32 | margin-top | Top margin |
.mr-0 to .mr-32 | margin-right | Right margin |
.mb-0 to .mb-32 | margin-bottom | Bottom margin |
.ml-0 to .ml-32 | margin-left | Left margin |
Auto Margin Classes
| Class | CSS Property | Description |
|---|---|---|
.mx-auto | margin-left: auto; margin-right: auto | Horizontally center element |
.ml-auto | margin-left: auto | Push element to the right |
.mr-auto | margin-right: auto | Push element to the left |
Responsive Classes
Add @{breakpoint} suffix to any margin class for responsive behavior:
.m-4@sm.mx-auto@md.mt-8@lg.mb-4@xl
SCSS Mixins
NuvoUI provides a comprehensive set of margin mixins for use in your SCSS:
Margin Mixins
| Mixin | Parameters | Description |
|---|---|---|
@include m($val) | $val: Margin value | Sets margin on all sides |
@include mx($val) | $val: Margin value | Sets left and right margins |
@include my($val) | $val: Margin value | Sets top and bottom margins |
@include mt($val) | $val: Margin value | Sets top margin |
@include mr($val) | $val: Margin value | Sets right margin |
@include mb($val) | $val: Margin value | Sets bottom margin |
@include ml($val) | $val: Margin value | Sets left margin |
@include ml-auto | None | Sets left margin to auto |
@include mr-auto | None | Sets right margin to auto |
@include mx-auto | None | Sets left and right margins to auto |