Editing Margin and Padding with Elementor

Editing Margin and Padding
Share with friends

Table of Contents

Web Hosting from £19.95
Hosting plans come with enhanced server security and 24h automatic backups. Lightening fast speeds with SSL certificates included free with all our plans.
Written by Simon

Last Updated 21/12/2023

Editing Margin and Padding

Editing margin and padding determine the space between your Widgets and Containers. By increasing or decreasing the values here, you can adjust the Widget’s position on the page.

Editing Margin and Padding with Elementor

Margin and Padding

Editing your margin and padding can be a little frustrating at first as the way it is structured may seem counter-intuitive. Both margin and padding are split into four sections:

  • Top
  • Right
  • Bottom
  • Left

The best way is to imagine the order like a clock. Top being 12, Right 3, Bottom 6 and Left 9. This visual will come in handy later. 

the Margin and padding clock

What is a Margin

The margin is the distance from the edge of the element to the edge of its container. In the example below, the Widget’s margin is from the edge of the Widget to the column.

What is Padding

Padding works in a similar way to margin. However, padding works inwards. If you increase the padding around a widget it will appear to shrink as you are increasing the space between the Widget and the edge of the Widget. This is also true for containers.

Example of margin and padding on a widget

Recommended Reading: What is a Widget

Positioning Widgets Using Margin and Padding

To edit a Widgets margin/padding:

  1. Select the Widget
  2. On the Elementor side panel click the Advanced tab
  3. This is where you can edit Margin/Padding.

Here you will see your margin and padding values blank and your Link icon grey. This means that your Widget’s positioning is set to default and that all the values are linked.

Typing 100 in the Top field will change all the other Margin settings to 100. To remove the linked settings, click the Link icon and you will be able to individually input all the values for the rest. 

Positioning the Widget

Increasing or decreasing the margin and padding will move the widget around the screen. Try adding 500px to the left margin and you will notice that the widget begins to move on your screen. 

It is a common mistake by beginners to add a margin to the right and expect the widget to move right. Visualise the clock again. When you input 500 into the left margin, what you’re doing is adding an invisible block of 500 pixels to the left of your widget. This displaces the widget and pushes it in the opposite direction.

Editing Margin and padding

Padding works in much of a similar way. Padding works well when you want to add space between two elements. There are some nuances between the two, for example, if you have a background on your container and add a margin a white/blank border will appear.

Web Hosting

From £19.95 /mo