Skip to main content
Padding utilities add space inside an element’s border — between the border edge and whatever content lives within. Unlike margin, padding is part of the element’s own box, so it affects background area and click targets, not the space between siblings. AtomicKit provides all-sides, horizontal, vertical, top, and bottom variants, giving you precise control over the inset of any Elementor widget, container, or section.

​
Available Patterns

The following table shows every padding class pattern AtomicKit currently ships.
Class 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
The current AtomicKit bundle does not include padding-left-* or padding-right-* as standalone utilities. Use padding-horizontal-* to apply the same value to both sides, or padding-* to set all four sides at once.

​
All-Sides Padding

Use padding-<value> to apply uniform inset spacing on all four sides of an element. This is the most concise option when you want equal breathing room all around — common for cards, buttons, callout boxes, and icon widgets. 
padding-6
Sets padding: 1.5rem (24px) on every side. This is a solid default for card components and content containers.

​
Horizontal and Vertical Shorthand

Use padding-horizontal-* and padding-vertical-* when the inset needs to differ between axes — for example, more breathing room on the sides than top and bottom, or vice versa.

​
Horizontal padding

padding-horizontal-8
Sets padding-left: 2rem and padding-right: 2rem simultaneously. Use this for wide containers where you want the content to sit away from the side edges.

​
Vertical padding

padding-vertical-4
Sets padding-top: 1rem and padding-bottom: 1rem simultaneously. Combine it with padding-horizontal-* for two-axis control: 
padding-vertical-4 padding-horizontal-8
This creates a “pill” inset — tighter top and bottom, wider left and right — common for buttons and inline badges.

​
Top and Bottom Padding

Use padding-top-* and padding-bottom-* when you need independent control over each vertical edge. A common case is a hero section that needs more space at the top (to clear a sticky header) than at the bottom. 
padding-top-12
Adds padding-top: 3rem (48px) — a strong inset for hero sections or prominent feature areas. 
padding-bottom-8
Adds padding-bottom: 2rem (32px) — useful for footer areas or sections with content directly following. Combine directional utilities freely for asymmetric vertical insets: 
padding-top-12 padding-bottom-6

​
About Missing padding-left and padding-right

AtomicKit’s current bundle intentionally omits standalone padding-left-* and padding-right-* utilities. In practice, you rarely need to set horizontal padding sides independently:
  • For equal horizontal inset, use padding-horizontal-*.
  • For all-sides padding with a different vertical value, combine padding-horizontal-* with padding-vertical-*.
  • For full control of all sides, start with padding-* all-sides and override the vertical edges with padding-top-* or padding-bottom-*.
If you genuinely need asymmetric left/right padding (for example, a list with a decorative left border), the AtomicKit Class Creator lets you define a custom utility with exactly the properties you need, keeping your custom CSS inside the design system rather than scattered across widget style panels.

​
Best Practices

1

Use all-sides padding for symmetric components

Cards, buttons, badges, and alert boxes almost always benefit from padding-* all-sides. It’s a single class, it’s readable, and it responds cleanly to font size changes.
2

Combine horizontal and vertical shortcuts for two-axis control

padding-horizontal-8 padding-vertical-4 is cleaner than four separate directional classes and communicates the design intent immediately — wide sides, compact top and bottom.
3

Add padding to containers, not their children, for consistent insets

When you have a section with multiple child widgets, add padding-* to the container rather than margin-* to each child. The result is the same but the container owns the responsibility for its own inset.
4

Use padding-top for header clearance on hero sections

Sticky or fixed headers overlap content. Add padding-top-12 or padding-top-8 to a hero section so the headline clears the header at all viewport widths.
5

Reset padding with padding-0 rather than overrides

If an Elementor widget applies default padding you want to remove, use padding-0 instead of setting a custom value in the style panel. The utility class will take precedence and keep the reset visible in your class list.

​
Related Utilities

  • Margin — Add space outside an element’s border
  • Gap — Space flex and grid children from the container level
  • Sizing — Control element dimensions that interact with padding and layout