WordPress Page Builder: Working with Padding and Margin

The difference between padding and margin can be very confusing. Even professional web designers sometimes mix up the two!

To help you grasp this concept, we are going to change the padding and margin of a specific premium block in BoldGrid’s Post and Page Builder Premium Plugin. Keep in mind that what you learn in this article is a general web design concept and almost every element on your website has padding and/or margin.

Start by creating a new page, and click the Add Block button. From the dropdown menu on the right side of the screen, select the Premium under Type and your desired industry under Category. Since the blocks are randomly generated, you may have to scroll to find the block we’re learning about today. It looks roughly like this (we are using BoldGrid Crio).

If you look at the top Heading box, Padding is the space between the text in the box and the outside of the box. Margin determines how much space there is between the box and the elements surrounding it, which in this case are the borders.

Since the blocks only contain starting text, your heading will likely end up longer than this. We modified the heading below to help demonstrate the changes outlined in this article.

First click in the Heading 2 text to bring up the DropTab, and click the Column Shape icon. From the Column Shape panel click the orange Customize Design button at the bottom.

To keep the overall design intact, we recommend you only change the elements we are changing.

This will show the starting settings – which is 2 in all positions. The orange link icon on the right of the panel means the values are linked, so changing one will change them all. For this new design, we will need each side to have different values, so click this orange icon to unlink the positions. The icon will turn black when they are unlinked.

Change the Top and Bottom values to 3, and Right and Left to 1. This will make the box taller but the text is closer to the left and right sides.

Next, click the next icon down on the left side to find the Margin controls.

This panel is already unlinked, and the starting values are 0 on Top and Bottom and 15 on Right and Left. Change Top and Right to 40.

Now our heading fits on one line because there’s less padding on the right and left of the box, and the borders are farther away because there’s more margin on the top and bottom of the box.

To create the same effect on the next box down in the block, navigate to the same controls as before. First click inside the box, then the column icon in the DropTab to bring up the Column Shape panel.

From here click Customize Design and just like before the initial padding values are 2 linked to all positions. Since this box has more than just a heading, we recommend leaving the Right and Left values at 2. To match the top box, we’re going to change the Top and Bottom to 3.

Next select the Margin icon – 2nd down. For reference, the starting values are 30 on Top and Bottom and 15 on Right and Left.

We need to add the same amount of margin as we did before to make them match. Since we changed 15 to 40 before, we will now add 25 to the Bottom and Left values here. Change the Bottom value to 55 and Left to 40.

Congratulations! This box now has the same design as the first.

Repeat these steps on the last box to finalize the new design. As with the 2nd box we recommend leaving the Right and Left padding to 2 and only changing the Top and Bottom to 3. This time you will change the Top and Bottom margin, from 0 to 40 in our case.

Our complete block now looks like this:

Feel free to experiment with different padding and margins on these boxes, they are perfect for learning. And remember – padding and margin controls for most elements can be found under its’ Advanced Controls.

Get Post and Page Builder Premium

The Post and Page Builder Premium Plugin is also available as part of the suite of plugins, tools and services activated by the BoldGrid Premium Connect Key.