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). Both are set in the Advanced tab of any widget, section, or column in Elementor.
What you'll need
Beginner 5 minutes- 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 padding. If you want more space between two sections, increase the margin of one of them.
Where to find spacing settings
Spacing is in the Advanced tab of any element's settings.
Click the element you want to adjust (section, column, or widget).
Click the Advanced tab in the left panel (the third tab, after Content and Style).
Find the Margin or Padding controls. Each shows four fields: Top, Right, Bottom, Left.
Enter your values. You can use pixels (px), percentages (%), or other units. Most layouts use pixels for consistency.
Watch the canvas update in real time as you type.
Link all four sides at once
By default, the four spacing fields may be linked (shown by a link icon between them). When linked, changing one value changes all four. Click the link icon to unlink them and set different values for each side.
Section padding
Sections have their own padding control, which is often where designers add the top and bottom space of each row on the page.
Common section padding values:
- 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 (not a widget inside it), go to the Advanced tab, and adjust the padding there.
Widget spacing
Individual widgets also have margin and padding in their Advanced tab. This lets you nudge a specific element without changing the whole section.
For example:
- Add bottom margin to a heading to push the paragraph below it further down
- Add top padding 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.
Look for the device icons (desktop, tablet, mobile) next to the spacing controls. Click the device you want to adjust and enter values for that screen size.
See also Making your page look good on mobile.
Common questions
Related guides
- Making your page look good on mobile
- Changing colors & fonts
- Working with columns
- Copying & pasting styles
- A tour of the Elementor interface
Need a hand?
Learn more
Copying & pasting styles in Elementor
Learn how to copy the visual style from one element and apply it to another using Elementor's Copy Style and Paste Style features.
Changing colors & fonts in Elementor
Learn how to change the color and font of any element in Elementor, and understand when to use element-level settings vs. global styles.