Padding

Control internal spacing with the bundled Skelementor padding utilities.

Overview

Padding adds space inside an element, between its content and its edge. In Elementor this is what makes cards feel roomy, buttons feel clickable, and content blocks stop hugging their borders. Skelementor currently ships padding, padding-horizontal, padding-vertical, padding-top, and padding-bottom.

This page documents only the bundled Skelementor padding families, so every example and table below maps directly to classes you can use today.

Pattern	Supported values
padding-<value>	0, px, 1, 2, 3, 4, 6, 8, 12
padding-horizontal-<value>	0, px, 1, 2, 3, 4, 6, 8, 12
padding-vertical-<value>	0, px, 1, 2, 3, 4, 6, 8, 12
padding-top-<value>	0, px, 1, 2, 3, 4, 6, 8, 12
padding-bottom-<value>	0, px, 1, 2, 3, 4, 6, 8, 12

Examples

Basic example

Use padding-<value> when the same amount of inner space should apply on every side of a card, panel, or Elementor content box. It is the most direct way to give content breathing room without changing the element’s outer footprint.

<div class="elementor-element background-gray-light padding-4 rounded">
  <div class="padding-8 rounded background-primary text-white text-center">padding-8</div>
</div>

Pattern	Supported classes	What it controls
padding-<value>	padding-0, padding-px, padding-1, padding-2, padding-3, padding-4, padding-6, padding-8, padding-12	Padding on all four sides

Adding padding to one side

Skelementor currently includes the top and bottom single-side padding families only. Use padding-top-<value> when content needs more room above it, and padding-bottom-<value> when the extra breathing room belongs below it.

<div class="elementor-element flex flex-col gap-6">
  <div class="rounded background-primary text-white text-center padding-top-6 padding-bottom-2">padding-top-6</div>
  <div class="rounded background-primary text-white text-center padding-top-2 padding-bottom-8">padding-bottom-8</div>
</div>

Pattern	Supported classes	What it controls
padding-top-<value>	padding-top-0, padding-top-px, padding-top-1, padding-top-2, padding-top-3, padding-top-4, padding-top-6, padding-top-8, padding-top-12	Top padding only
padding-bottom-<value>	padding-bottom-0, padding-bottom-px, padding-bottom-1, padding-bottom-2, padding-bottom-3, padding-bottom-4, padding-bottom-6, padding-bottom-8, padding-bottom-12	Bottom padding only

Adding horizontal padding

Use padding-horizontal-<value> when left and right spacing should move together. This is useful for buttons, content rows, and boxed text where the horizontal rhythm needs to be stronger than the vertical rhythm.

<div class="elementor-element background-gray-light padding-2 rounded">
  <div class="padding-horizontal-8 padding-vertical-2 rounded background-primary text-white text-center">padding-horizontal-8</div>
</div>

Pattern	Supported classes	What it controls
padding-horizontal-<value>	padding-horizontal-0, padding-horizontal-px, padding-horizontal-1, padding-horizontal-2, padding-horizontal-3, padding-horizontal-4, padding-horizontal-6, padding-horizontal-8, padding-horizontal-12	Left and right padding together

Adding vertical padding

Use padding-vertical-<value> when the top and bottom should expand together without making the element wider. This works well for stacked callouts, promo boxes, and button styles that need a taller silhouette.

<div class="elementor-element background-gray-light padding-4 rounded inline-block">
  <div class="padding-vertical-8 padding-horizontal-4 rounded background-primary text-white text-center">padding-vertical-8</div>
</div>

Pattern	Supported classes	What it controls
padding-vertical-<value>	padding-vertical-0, padding-vertical-px, padding-vertical-1, padding-vertical-2, padding-vertical-3, padding-vertical-4, padding-vertical-6, padding-vertical-8, padding-vertical-12	Top and bottom padding together

Best Practices

• Use padding-<value> for cards and wrappers that need even inner spacing on every side.
• Use padding-horizontal-<value> and padding-vertical-<value> when horizontal and vertical rhythm should be different.
• Use padding-top-<value> and padding-bottom-<value> when only the top or bottom edge needs extra room.
• Keep the same padding values across the same component family so Elementor layouts feel consistent.