How to Remove Padding in Elementor Section (Easy Fix for 2025)

If you’ve ever built a website with Elementor, you’ve probably run into this frustrating issue: extra padding appears out of nowhere in your sections — especially on mobile.

You set the padding to 0, but white space still shows up. Sound familiar?

In this step-by-step guide, you’ll learn exactly how to remove padding in an Elementor section, including mobile spacing, theme conflicts, and hidden defaults — no coding required (unless you want full control).

Whether you’re building a full-width hero section, a landing page, or a custom header, this fix will help you achieve pixel-perfect design.

Why Does Elementor Add Extra Padding?

Even when you set padding to 0px in Elementor, you might still see space above, below, or inside your sections. Here’s why:

1. Theme Styles Override Elementor
   Your WordPress theme (e.g., Astra, GeneratePress, Hello Elementor) may add default spacing.
2. Mobile Responsive Settings
   Elementor applies mobile padding by default — even if desktop is set to 0.
3. Inner Section or Column Padding
   You might have removed section padding but forgotten column or inner section spacing.
4. Global Default Spacing
   Elementor 3.0+ uses global settings that apply padding across all new sections.

Let’s fix each one.

Step 1: Remove Padding in the Section Itself

1. Open your page in Elementor Editor
2. Click on the Section you want to edit
3. In the left panel, go to Style > Background
4. Scroll down to Padding
5. Set Top, Bottom, Left, Right to 0px
6. Click the link icon to disable uniform padding if needed

Tip: Do this for desktop, tablet, and mobile tabs (see Step 2).

Step 3: Check Column & Inner Section Padding

Even with section padding at 0, columns inside can have spacing.

How to Fix:

1. Click on each Column inside the section
2. Go to Style > Background
3. Set Padding to 0px (all devices)
4. If using an Inner Section, repeat the process

Pro Tip: Use the Navigator (bottom-left in Elementor) to easily select nested elements.

Step 4: Disable Theme Default Spacing

Many themes (like Astra, Kadence, OceanWP) add their own spacing — overriding Elementor.

How to Fix:

Option A: Adjust Theme Settings

• Go to Appearance > Customize
• Look for Layout > Container or Spacing
• Set Section/Content Padding to 0px
• Publish changes

Option B: Use Hello Elementor Theme (Recommended for Full Control)

• Install the Hello Elementor theme (free, ultra-lightweight)
• It has zero default padding — perfect for Elementor designers

Step 5: Reset Elementor Global Spacing (Newer Versions)

If you’re using Elementor 3.0 or later, global settings may be adding padding.

How to Disable:

1. Go to Elementor > Settings > Style
2. Find Default Spacing
3. Change from 20px to 0px
4. Click Save

This affects all new sections — existing ones must be updated manually.

Bonus: Remove Extra Space with Custom CSS (Advanced)

If padding still won’t go away, use this custom CSS:

/* Remove section padding */
.elementor-section {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Remove column padding */
.elementor-column > .elementor-element-populated {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

How to Add CSS:

1. Go to Appearance > Customize > Additional CSS
2. Paste the code
3. Publish

Use this only if the above steps don’t work.

FAQs

Why is there still space after setting the padding to 0?

Likely due to mobile defaults, theme styles, or column padding. Follow Steps 2–4 above.

How do I make a full-width section in Elementor?

• Set section width to Full Width
• Remove padding (all devices)
• Use the Hello Elementor theme to avoid conflicts

Can I remove the margin in Elementor?

Yes — go to Advanced > Margin and set to 0px. You can also target specific sides.

Does Elementor add extra space on mobile?

Yes — by default. Always check the mobile view in the editor and set the padding to 0px.

Final Tips to Avoid Padding Issues

1. Start with Hello Elementor theme — cleanest canvas
2. Set global spacing to 0 if you prefer full control
3. Always test on mobile before publishing
4. Use the Navigator to inspect nested elements

Conclusion: Say Goodbye to Unwanted White Space

Removing padding in an Elementor section is simple once you know where to look. The key is checking:

• Desktop, tablet, and mobile settings
• Column and inner section spacing
• Theme defaults
• Global Elementor spacing

Now you can build clean, full-width layouts without frustrating gaps.

If you found this guide helpful, share it with fellow WordPress designers — and let us know in the comments if you’re still seeing extra space!