The Difference Between Padding and Margin in Web Design

Updated: December 16, 2020

When customizing a certain element on a page builder plugin (be it Divi Builder, Elementor, Brizy, or the page builder of your choice) you might want to add space between the associated element and other elements around it. In this case, you can edit the margin. What is margin? Is it different from padding?

When working with a page builder plugin on your WordPress site, the emphasis is on the design, not content. While web design itself can’t really far away from CSS. Both margin and padding are two CSS properties that are used to control the space on an element. The difference is that the margin property is used to control the space between an element and other elements around it, while the padding property is used to control the space between an element and the content inside it. Take a look at the following image.

Image source

Be it margin or padding has sides (top, bottom, left, right) that you can set the space of. In the context of page builder plugin, you don’t need to deal with CSS code to set either the margin or padding. You can do so via the settings panel of the page builder you use. For instance, if you use Elementor, you can go to the Advanced tab on the settings panel to set the margin and padding of an element.

If you use Divi Builder, you can set the margin and padding from the Spacing block under the Design tab on the settings panel while on Brizy you can do so from under the Styling tab on the settings panel. The ability to control both the margin and padding of an element offers you more options to set the layout of the page you are working on with your favorite page builder plugin.

Originally posted on: December 16, 2020

This page may contain affiliate links, which help support WP Pagebuilders.

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This

Share This

Share this post with your friends!