Spacing

Margin and padding utilities built around the bundled spacing scale.

Overview

Skelementor bundles one spacing scale for margin (outside the box), padding (inside the box), and gap (between flex items). Pick the same numeric suffix across utilities to keep rhythm predictable.

Family	Value scale
margin-*	0, px, 1, 2, 3, 4, 6, 8, 12, auto
padding-*	0, px, 1, 2, 3, 4, 6, 8, 12
gap-*	0, px, 1, 2, 3, 4, 6, 8, 12, plus gap-only 10, 14, 16, 18, 20, 22, 24

margin-*: margin, margin-horizontal, margin-vertical, margin-top, margin-bottom, margin-left, margin-right (for example margin-horizontal-4). padding-*: padding, padding-horizontal, padding-vertical, padding-top, padding-bottom (for example padding-horizontal-6). gap-*: gap, gap-x, or gap-y (for example gap-4, gap-x-8). Margin auto works on all margin families, including margin-top-auto and margin-bottom-auto.

Margin

External spacing with positive, auto, and axis helpers

Padding

Internal spacing with all-side and directional helpers

Common Spacing Patterns

Use the spacing families consistently in cards, forms, and sections so outer spacing, inner padding, and content rhythm all come from the same bundled scale.

Best Practices

1. Use the 4px Scale

   Always use the predefined spacing scale (px, 1, 2, 3, 4, 6, 8, 12) for consistency. This ensures predictable layouts and easier maintenance.

2. Maintain Vertical Rhythm

   Use consistent spacing between related elements for better visual flow.

3. Group Related Elements

   Use smaller gaps within groups and larger gaps between groups.

4. Reserve Fixed Helpers For Exceptions

   Reach for 0, px, and auto when you need explicit control beyond the main bundled scale.

Spacing Hierarchy

1. Micro spacing (1-2): Fine adjustments, icon spacing
2. Small spacing (3-4): Element internal spacing, form fields
3. Medium spacing (6): Section internal spacing, card padding
4. Large spacing (8-12): Section spacing, major layout divisions

Related Utilities

Layout

Flexbox and display utilities for layout

Sizing

Width and height utilities for spacing