Skip to main content

​
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. The table is the quick reference; the callout under it explains how * becomes real class names, and the cards link to deeper pages for each family.
PatternValue
m-*-0, p-*-0, gap-*-00 / 0px
m-*-px, p-*-px, gap-*-px1px
m-*-1, p-*-1, gap-*-10.25rem / 4px
m-*-2, p-*-2, gap-*-20.5rem / 8px
m-*-3, p-*-3, gap-*-30.75rem / 12px
m-*-4, p-*-4, gap-*-41rem / 16px
m-*-6, p-*-6, gap-*-61.5rem / 24px
m-*-8, p-*-8, gap-*-82rem / 32px
m-*-12, p-*-12, gap-*-123rem / 48px
m-*-autokeyword
gap-*-143.5rem / 56px
m-*: m, mx, my, mt, mb, ml, mr (e.g. mx-4). p-*: p, px, py, pt, pb (e.g. px-6). gap-*: gap, gap-x, or gap-y (e.g. gap-4, gap-x-8). Margin auto works on all margin families, including mt-auto and mb-auto.

Margin

External spacing with positive, auto, and axis helpers

Padding

Internal spacing with all-side and directional helpers

​
Quick Start

<section class="cont my-12">
  <div class="card px-8 py-10 mb-6">
    <p class="text-sm uppercase tracking-wide text-gray mb-2">
      Spacing system
    </p>
    <h2 class="text-4xl font-bold leading-tight text-black mb-4">
      One bundled scale
    </h2>
    <p class="text-base leading-relaxed text-gray-dark mb-8">
      Use the default `m-*` and `p-*` families directly to keep outer spacing and inner spacing consistent.
    </p>
    <p class="mt-4 text-sm text-gray">
      Pair vertical margin with balanced panel padding for clean section rhythm.
    </p>
  </div>
</section>

​
Common Spacing Patterns

​
Card Layout

<div class="elementor-element card p-6 mb-4">
  <h3 class="text-xl font-semibold mb-4">
    Card Title
  </h3>
  <p class="text-gray mb-4">
    Card description with consistent spacing.
  </p>
  <button class="btn btn-blue">
    Action
  </button>
</div>

​
Form Layout

<form class="max-w-md">
  <div class="mb-4">
    <label class="text-sm font-medium mb-2">
      Email
    </label>
    <input class="w-full p-3 border-1 border-solid border-gray rounded" type="email"/>
  </div>
  <div class="mb-6">
    <label class="text-sm font-medium mb-2">
      Password
    </label>
    <input class="w-full p-3 border-1 border-solid border-gray rounded" type="password"/>
  </div>
  <button class="btn btn-blue w-full">
    Submit
  </button>
</form>

​
Section Layout

<section class="py-12">
  <div class="cont">
    <div class="card px-8 py-10">
      <h2 class="text-3xl font-bold text-center mb-6">
        Section Title
      </h2>
      <p class="text-lg text-center text-gray mb-6">
        Section description
      </p>
      <p class="text-base text-gray-dark mt-4">
        Use outer section padding and inner panel padding to create comfortable rhythm.
      </p>
    </div>
  </div>
</section>

​
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

Typography

Line height and text spacing utilities