Margin and padding are used to create space between elements, and directly impact the layout as well as the look and feel of your site. It’s important to know what these 2 properties do and how they affect your design.
In this tutorial we’ll cover:
✔︎ The difference between margin and padding
✔︎ When to use margin or padding
✔︎ Responsive editing
✔︎ Z-Index and column alignment
✔︎ And much more!
INTRO
Hi all, it’s Ziv from Elementor.
In this tutorial, I’ll go over margin and padding basics, and show you how they can be used to build creative designs, just like the one you see here.
As you most likely know, “margins” and “paddings” are used to create “space” between elements..
And directly impact the layout as well as the look and feel of your site.
Creating a natural flow for the user to navigate through the content is important.. Especially when looking to increase conversions by guiding the visitor down a page to a conversion point.
Therefore, it’s important to know what these 2 properties do and how they affect your design. There are important differences which we’ll go over in this tutorial.. and, once you understand them, you’ll be able to make better design decisions.
Let’s make a start!
STEPS
We will be working with this section, which has 2 equally sized columns. (I’ve set the section’s height to “Fit to the Screen”, and the column position is set to middle.. so the columns appear in the center. This will give us a clear point of view for the tutorial)
There’s are 3 widgets in the right column: the heading, text editor and button widgets.
Let’s drag an image widget into the left one.
(As you can see, there already is some default space between the image widget and the column. We’ll get to that in a bit.)
* For example purposes, I’ll refer to the (image) widget as the “element” and the actual image as the “content” just to keep things clear. (The same goes for Just like the text in the text editor widget is the “content” and the widget itself the “element”)
Let’s start off by giving the image widget a border [ advanced > border > solid > color: raspberry > width: 5]
This will help us see how the margin and padding properties behave.
The border surrounds the element’s content. (element=image widget, content=image )
Next, in advanced, I’ll add some padding [70px all around], as you can see it adds space inside the border.. Padding is used to create space around the content, inside the defined border. This applies to widgets, columns, and sections alike.. More on that soon.
You can see that padding grows the element’s (widget) size and shrinks the content inside and vice versa. [decrease till 30, increase till 70 again]
Padding goes around all four sides of the content and you can target and change the padding for each side.
When the values are linked.. All sides get the same value. To set them individually simply click to unlink them,.. I’ll decrease the padding on the right a bit [to 30px], and increase the left [to 150px].
Linking them together again, automatically set’s them back to the 70px we set before
As you can see, the border surrounds both the padding and content
Let’s give the image widget a background color and see what happens. [advanced, basil]
The Padding is affected by the styling of an element, such as the background color you see here.
Now lets give the image widget some margin and see if it behaves differently. [Advanced > margin: 30px all around]
As you can see it adds space outside the border.. Margin is used to create space around the element (the widget) outside the defined border. Again, this applies to widgets, columns, and sections alike.
Also, margin isn’t affected by the styling of the element, such as background color. But it is affected by the styling of the container it’s in.. in this case the column, let’s give it a background color so you can see..
If both background colors are the same though, things can get confusing, especially when designing without borders.
BTW, It’s important to know that in the editor.. the section/column and widget handels and outlines aren’t the borders..
As you can see the margin we added to the image widget appears inside the blue outline of the widget. This might be confusing at first, because when we remove the margin and padding, they seem to be the same.[remove margin and padding, add back: m30, p70]
The same principals apply to columns and sections, and any element you can assign the margin and padding properties to.
Let’s give the column a border as well so you can see. [color: raspberry > width: 5] Heads up, things might seem more confusing before the penny drops.. No worries..at the end of this tutorial you’ll now the ins and outs of it all..
Let’s add some margin……… and padding [30px both]
As you can see, it behaves the same as with the image widget. [set section background color: basi]
*Okay so let’s recap what we have over here: this is the image.. which is the widget’s content.. Outside it, is some green padding.. It’s green because of the widget’s background color, the pink border separates the padding from the margin.. which is purple because of the column’s background color.. The column’s padding and the image widget’s margin seem to be the same because of it,.. And lastly.. the column’s margin will get the same color as the section’s background.. [change it > remove it]
Don’t panic if you are still a bit confused.. I’ll show you some more examples so things become crystal clear.
Now that we know the basics, let’s reset all of the styling and go over some practical applications for using margins and padding. Soon we’ll check out mobile responsive settings as well.
Let’s select the image. Like I mentioned before.. you can see that there’s some space elementor adds to the column to keep things organised by default. Let’s remove it so the image widget takes up all of the column’s space.
Pop-quiz.. Is that the column’s margin or the padding?
Well, done.. It’s the padding.. Because it’s the space inside the column’s defined border.
Let’s unlink it, as you can see ..all values are set to 0, so no padding is set.. Allowing the image widget to fill up the space.
I’ll go ahead and select the image for this design
Now let’s see how Margins and paddings can be used to position the widget’s in the right column.
Often the same visual layout can be achieved by using margin and padding, so when do we know what to use?
As a rule of thumb,.. Margin is used to space an element in relationship to other elements on the page.
For example,… to create space between the heading, text editor and button widgets we can add some margin at the top and bottom of the text editor widget [20px top, 80px bottom]
Padding on the other hand, is used to create distance between the content ..and border.. of an element. This way we can adjust the appearance of the element itself.. Just like you see when we add some padding on the right over here [80px padding right on text editor, then 200],..
It’s important to note that for beginners, using margin and padding can be confusing because both are parts of your element even if you don’t include a border. Especially when the section, column and widget backgrounds are the same colour.. Just like we saw earlier.
By adding a border, things start to clear up a bit. Let’s add one to this text editor, we can see that the border surrounds the content (the text).. And now the top and bottom margins we added to the widget earlier.. are easier to identify
Also, by Adding a background colour, we can see that the margins aren’t affected by the element’s styling. But the padding is! [hover mouse over the padding on the right side ]
There are many creative ways to use paddings and margins, so keep these basics in mind when playing around with them..
Let’s remove the background colour and border..
And back in the advanced dropdown.. check out the margin and padding some more..
These responsive handles.. as you might know, indicate that the values can be adjusted for tablet and mobile devices. Currently they are set for desktop.
Let’s enter the mobile responsive mode and see how the margin and padding behave.
As you can see,..they are left blank… Indicating they inherit the larger device’s settings.. which in our case are the values we set for desktop.
Let’s get rid of the 200px padding on the right first [switch to desktop and back again via the responsive handle shortcut] By unlinking the values,.. we reset them all to 0. Then simply add the desired padding for mobile [50px right]
Same goes for the margin,.. Unlinking..removes the values inherited from the desktop.. Then set them for mobile
It’s important to make sure you check all padding and margin settings on desktop, tablet, and mobile. And remember,.. If they are left blank they will inherit the larger device’s settings.
Okay we’re almost done here.. [back to desktop] Just a few more tips to see how Elementor can be used to help you make better design decisions.
I’ll go ahead and delete the text editor widget.
And instead of using margin or padding to position the heading and button widgets, I’ll enter the column settings.. and in Layout, set the vertical align. There are many options to choose from, so make sure you checkout the dedicated video I’ve linked in the description below.. to understand what each one does. For this example I’ll set it to middle, so all widget’s in the column automatically vertically align to the middle
BTW, Depending on your design needs.. if you want to increase or decrease the default space between these widgets, you can set the widget space over here. [set to 100, then delete]
Lastly, if you want to position elements outside their container,.. you can use negative margins.
They allow you to move widgets and columns above or below other nearby elements on the page..improving your designs when used accordingly.
Let’s say, you want to move this heading widget to left a bit ..outside the column..so it overlaps with the image in the column on the left
All you need to do, is add a negative margin to the left side of the heading widget.. As you can see,.. The content moves toward the left ..onto the column next to it.. [-370px]
Let’s also add a background color [white],..
Likewise, Adding a negative top margin to the image widget for example, moves it upward.. [-150px]
A good example to You can use this technique to improve conversion rates by breaking up straight borders.. for example [set raspberry background color in right column to see straight line]
This way.. visitors will see the image first ..and know to keep scrolling down the page.
This only works for margins though, because negative padding would cause the border to collapse into the content – which in turn would make the content area smaller than the content, which doesn’t make sense. [remove the negative margin and raspberry background color]
Lets add some padding though, to increase the space around the content [100px all around]
Like I mentioned earlier.. Tablet and mobile responsive modes automatically inherit any negative margins you set for your desktop designs, so make sure to check them when making mobile edits [show responsive tablet mode and go back to desktop]
Another thing to pay attention to when using negative margins, is the z-index.
The heading widget automatically appears on top of the image widget in the column of the left. But what if your design requires something else..?
By adding a Z-Index value to an element, you can make sure it appears on top of another element.
So let’s say we wan’t the image to appear on top of the heading..
All you need to do, is go to the image widget’s Advanced tab, and in Z-Index ..adjust the value.. I’ll set it to 1. As you can see, you can use Z-Index values to layer different elements on top of each other. The largest Z-Index value will appear on top. (note that this can be done for widgets, columns, and sections alike)
For example, if you wan’t the heading to appear on top again.. Simply go the the heading widget’s advanced tab and adjust the z-index value. I’ll set it to 2.. It will appear on top because it’s the largest value of the two. (pun intended)
Okay we’re almost done here! All I’ll do to complete the design,.. is increase the font size [140px]… ……and align the button to the center.
Okay.. let’s complete the design! I’ll increase the font size a bit……… and align the button to the center. And that’s it!
Well that’s it!
Now you know what margins and paddings are,.. and how they affect elements on your site. Use them together with other Elementor settings such as vertical alignment, negative margins and the z-index to create your own stunning designs, just like the ones you see here.
Like always, have fun building and don’t forget to subscribe to our YouTube channel for more tips and tutorials!
Ciao for now!
