Skip to main content
Spacing overview cover

​
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.
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

Layout

Flexbox and display utilities for layout

Sizing

Width and height utilities for spacing