Padding and margin control how space is added inside and around your content. Knowing when to use each will help you organize and design your page better.
What is Padding?
Padding is the space inside a column. It’s the area between the content (like text or images) and the edges of the column. Padding helps create extra space inside the column so the content doesn’t touch the edges.
When you use padding, it increases the size of the column. For example:
If you want to move text or images away from the edges of the column, you use padding.
Padding is also helpful when you have a background color or image in a column. It keeps the content from touching the edges of the background.
What is Margin?
Margin is the space outside a column. It creates space between the column and other columns or elements. Margin doesn’t change the size of the content inside the column, but it helps to push the column away from others.
For example:
If you want to move a column down or separate columns, you use margin.
Margin is also helpful when you want to create space between rows or sections.
Visual example
To better understand the difference, look at the image below:
The orange area represents margin, which is space outside the column.
The green area represents padding, which is space inside the column.
This shows how padding and margin affect the layout in different ways.
The difference between Padding and Margin
Padding is space inside the column and increases its size.
Margin is space outside the column and moves it away from other columns or sections.
When to use padding
Padding is used when you want to make a column or row bigger by adding space inside it. For example:
If you want to give extra space between the content and the edges of the column, you add padding.
If you have a background color in a column, always use padding. If you use margin, white space will appear around the background because margin doesn’t affect the content like the background color.
In short, use padding when you want to make a column bigger.
When to use margin
Margin is used when you want to move content or create space outside the column. For example:
If you want to move a column down or add space between columns, you use margin.
Use margin when you want to move content, such as placing an image further down in a column.
In short, use margin when you want to move content and create space outside the column.
Summary
Padding adds space inside the column, making the content feel less tight and increasing the column’s size.
Margin adds space outside the column, creating distance between it and other columns or sections.
By understanding how and when to use padding and margin, you can control the layout of your page and make it look more organized and professional.
We hope this article has helped you understand the difference between padding and margin in the page builder. If you have any further questions, please don't hesitate to reach out to our customer support team for assistance.