Adjusting spacing, margin & padding in Elementor

Learn how to control the space around and inside elements using margin and padding settings in Elementor.

Spacing is one of the most powerful tools in web design. Too little space makes pages feel cramped. Too much makes content feel disconnected. This guide explains how margin and padding work in Elementor and how to adjust them.

Quick summary

Padding is the space inside an element (between its content and its edge). Margin is the space outside an element (between it and other elements). On widgets, containers, sections, and columns, both are set in the Advanced tab. Elementor's newer V4 elements have no Advanced tab; their spacing is on the Style tab.

What you'll need

The Elementor editor open

Padding vs. margin — what is the difference?

This distinction trips up a lot of people. Here is the simplest way to think about it:

Term	What it is	Think of it as…
Padding	Space inside the element, around its content	The foam padding inside a box
Margin	Space outside the element, pushing other things away	The gap between boxes on a shelf

Example: If you want more breathing room inside a button (so the text is not right at the edge), increase the button's padding. For the Button widget, that padding setting is on the Style tab. If you want more space between two sections, increase the margin of one of them.

Where to find spacing settings

General spacing is in the Advanced tab of an element's settings. (On newer V4 elements, look for Spacing on the Style tab instead.)

Click the element you want to adjust (container, section, column, or widget).

Click the Advanced tab in the left panel. It is the third tab: after Content and Style on a widget, or after Layout and Style on a container, section, or column.

Find the Margin or Padding controls. Each shows four fields: Top, Right, Bottom, Left.

Enter your values. You can use pixels (PX), percentages (%), EM, or REM. To switch units, click the unit shown on the control. Pixels are the simplest place to start.

Check the canvas to see how the change looks.

Link all four sides at once

By default, the four spacing fields are linked. When linked, changing one value changes all four. Click the chain (link) icon to unlink them and set different values for each side.

Section padding

Containers and sections have their own padding control, which is often where designers add the top and bottom space of each row on the page.

Rough starting points (a rule of thumb, not an Elementor default):

Small gap: 20–40px top and bottom
Medium gap: 60–80px top and bottom
Large gap: 100–120px top and bottom

If your site's sections feel too close together or too far apart, this is usually where the fix is.

Column padding

You can add padding to individual columns — for example, to give text inside a column a bit more breathing room from the column edge.

Click the column's handle (not a widget inside it), go to the Advanced tab, and adjust the padding there.

Individual widgets also have margin and padding in their Advanced tab. This lets you nudge a specific element without changing the whole section. Some widgets, such as buttons and forms, have extra padding settings on their Style tab too.

For example:

Add bottom margin to a heading to push the paragraph below it further down
Add top margin to a button to separate it from the text above

Responsive spacing

You can set different spacing values for desktop, tablet, and mobile. This is important because a 100px top padding that looks great on a desktop may be excessive on a small phone screen.

Settings you can change per device, including margin and padding, show a device icon next to them. Click that icon, choose a device from the list, and enter values for that screen size. Elementor recommends switching to that device's view in the top bar first.

Common questions

My section has a big gap above it — how do I remove it?

Click the section above the gap (or the one below it). Go to its Advanced tab and check the Margin and Padding values. A large top margin or top padding on the lower section (or large bottom values on the upper one) is usually the cause. Set the value to 0.

If the gap is at the very top or bottom of the whole site, it may come from your theme rather than Elementor. Ask us and we'll check the theme settings.

I changed padding on a section but nothing changed — why?

Make sure you are in the correct tab: sections have Layout, Style, and Advanced tabs, and general padding is on Advanced. Also, check that you are editing the section and not a widget inside it — they have separate spacing controls. Finally, check which device view you are in: a value set for tablet or mobile doesn't change the desktop layout.

What units should I use for spacing?

Pixels (px) are the most predictable for fixed spacing. Percentages (%) scale with the width of the area the element sits in, even for top and bottom spacing. For most routine edits, use pixels.

Why does my spacing look right on desktop but weird on mobile?

Mobile devices may be inheriting the same large padding values set for desktop. Use the device-specific controls to set smaller padding for mobile. See Making your page look good on mobile.

Need a hand?

If you're stuck, email support@chykalophia.com and we'll help. Include your website address and a screenshot if you can.

Learn more

Elementor: Create space with padding and margins