Free Digital Courses 1 min a Day

Designed for learners of all ages. Easy to understand. Deaf-friendly.

Start upgrading your skills today!

FAQ

Qn:

[WooCommerce Store] Difference between Margin and Padding in Elementor

Ans:

For every Element in Elementor Pro, under the Advanced Settings, you will see the settings for Margin and Padding.

Margin is the space between the selected Element and the Element next to it. So, top margin pixels will be the space allowed between the current element and the next element above. Right margin pixels will be the space allowed between the current element and the next element to the right. Bottom margin pixels will be the space allowed between the current element and the next element below.

We usually create elements within a section. So, if there is just 1 element in 1 section, then the margin settings of this element will be the space between the element and the section. When you set the background colour of the element to a certain colour, you will see a white space around that background colour on the outside. That white space is the section. If you increase the margin settings for this element, you will notice that white space gets bigger. (Sidetrack: If you like the entire screen to have that background colour, then you will need to also set the section background to the same colour.)

Margin may be playfully used to create an overflow effect. For example, you may set the top margin for an element to a negative number like -20px. It will move upwards to overlap the section above. It can create a nice overlap effect. If you do this, do also check how it looks on different devices.

Padding is all about the space inside the element. Each element has a container (that we don’t really see). If you change the background colour of that Element, you will be able to see the container size (which is the size of the background colour). Padding is the space allowed between the content and the borders of the container within the element. So, if you increase your padding, you will see that your content gets squeezed more inside the container. If you increase only the top padding, then you will see your content moving downwards within the element container.

Please feel free to comment below if you have more questions about this topic.

Hope this helps! 🙂

Leave a Reply

Your email address will not be published.

×

Hello!

Click one of our representatives below to chat on WhatsApp or send us an email to [email protected]

× How can I help you?