Margins and padding

Page Builder has built-in spacing defaults. Rows and columns have default margins and padding, and modules have default margins. There is also an autospacing feature that reduces spacing automatically on mobile devices. This means that you don't have to fuss over spacing at all – unless you want to. 

If you do want more control, there are several ways you can change spacing in Page Builder layouts:

  • Locally
    You can change the margins and padding of individual rows and columns, and you can change the margins of individual modules. You can set different values for each device size.
  • Site-wide
    You can change the default settings for each device size, which are then used as the defaults in individual rows and modules.
  • Mobile autospacing
    You can disable mobile autospacing or override it by setting your own values for small devices.

In this article we'll describe a simple approach to adjusting margins and padding if you're new to Page Builder. For more finely tuned control over spacing and the details about how the final value is determined, see the troubleshooting article on margins and padding.

But first, a quick review of the CSS border box

As shown in the diagram below, the width and height of a border box apply to the content area. The padding, border width, and margin are added to that. Padding is inside the border; margins are outside the border. 

Tip: If the box-sizing property is border-box, the width and height properties include content, padding, and border.

Tips for basic margin and padding settings

The interactions among the various ways to set margins and padding can get rather complex, but here's a recommended basic method for approaching it.

1

Lay out your page first for large devices (desktop). As you get more familiar with how Page Builder adjusts margins and padding for mobile, you can switch to a "mobile first" approach if you want.

2

Lay out your entire page before you start adjusting margins and padding, so you don't have to keep redoing them as you move things around.

3

Make adjustments to individual margins and padding for large devices on the Advanced tab of individual rows, columns, and modules. 

Tip: Page Builder modules don't have built-in padding. An easy way to increase padding for a module is to make sure it's wrapped in its own column, then change the column padding.

4

If you find that you're consistently making the same change to margins and padding, you might consider changing the default settings. 

See the Related Articles about default settings and how to change them.

5

Once you're happy with your settings for large devices, check the settings for tablets. Go back to the Advanced tab and click the icon next to a margin or padding row to change the view to tablet. By default, whatever value you enter for desktop is also used for tablets, but you can change specific values in tablet view.

6

Click the icon again to check your layouts again in mobile view. The autospacing feature automatically reduces the top, bottom, left, and right margins in rows, columns, and modules. It also reduces the left and right padding in rows and columns. You can override that by entering a value in mobile view.

If the spacing is not behaving the way you want, see the Related Article on troubleshooting margin and padding spacing.