Skip to main content

​
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.
PatternSupported 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>
PatternSupported classesWhat it controls
padding-<value>padding-0, padding-px, padding-1, padding-2, padding-3, padding-4, padding-6, padding-8, padding-12Padding 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>
PatternSupported classesWhat 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-12Top 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-12Bottom 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>
PatternSupported classesWhat 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-12Left 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>
PatternSupported classesWhat 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-12Top 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.