Troubleshooting: How margin and padding values are determined

While basic margin and padding spacing is very easy in Page Builder, it can get complicated when you want to exert finer control over individual settings. If you can't figure out why one of your settings doesn't seem to be showing on the published page, it may be helpful to read the technical information here about how settings, propagation, overrides, and autospacing interact to settle on a final value.

Factors that influence the final margin or padding value

There are a number of factors that affect the final margin and padding value for each row, column, or module on each side (top, bottom, left, right) and at each device size, including what happens when a value is not explicitly set, or when there's more than one value competing to be the winner. 

Here are the factors that determine each final margin and padding value:

  • Built-in defaults for margin and padding settings.
  • Custom defaults for some margin and padding settings.
  • Margin and padding settings for individual rows and columns, and margin settings for modules, for each side (top, bottom, left, right) at each device size.
  • Autospacing, which automatically reduces spacing on mobile devices.
  • Propagation rules for when a value is not explicitly set by the user.
  • Overrides when these various types of settings and propagations conflict.

Built-in defaults

Out of the box, Page Builder adds the following margins and padding:

  • 0px margin on each side of all rows and columns
  • 20px padding on each side of all rows
  • 20px margin on each side of all modules

If you didn't change a single margin or padding anywhere, these defaults would apply on every device. Note that modules don't have padding.

Custom defaults

If you want  to override the built-in defaults site-wide, you can make the following changes in Tools > Global settings:

  • Change default margins of rows on all sides for each device size
  • Change default padding of rows on all sides for each device size
  • Change default margins of modules on all sides for each device size.

For example, you could set the default row margin to 30px on desktop, 20px on tablets, and 10px on mobile. This custom default would apply to all sides of every row.

You can't set custom defaults for columns, and remember that modules don't have padding.

Individual settings

Individual settings (we'll also call them explicit individual settings) are values set by the user on the Advanced tab of individual rows, columns, and modules. You can set a different value for every side (top, bottom, left, right) of every single row, column, and module, at every device size (large, medium, small). Luckily, you don't have to if you're satisfied with the spacing that's applied automatically.

Autospacing

Autospacing is a Page Builder feature that makes your mobile layouts look better without needing to change individual mobile spacing settings, but if you want more control over spacing on small devices, you can override it or disable it entirely.

Autospacing is enabled when you install Page Builder, and it works as follows:

  • All margins for rows, columns, and modules are set to the default margin value.
    See Example 1 below.
  • Left and right padding for rows and columns is set to the default padding value. The top and bottom padding is not affected by autospacing. 
  • If a custom default is explicitly set for small devices, autospacing uses the custom default value instead of the built-in default value.
    See Examples 4 and 8 below.

Autospacing interacts with propagation and overrides, as described in the next section.

You can disable autospacing, but this is not generally advised, because it means that you will have to make many more individual settings on your site. 

Propagation

Propagation occurs when a  specific value isn't entered by the user into a particular field. Here are the propagation rules:

  • Custom defaults: Margin and padding values set for large devices (desktop) propagate custom default values to medium devices (tablets) and small (mobile) devices. Values set for tablets don't propagate. See Example 2 below.
  • Individual settings: A margin or padding value for large devices set on the top, bottom, left, or right side of a row, column, or module propagates to the identical setting on medium and small devices. Values explicitly set for tablets don't propagate. 
    See Examples 3 and 5 below.

Propagation is subject to overrides. See the next section. 

Overrides

When explicit individual settings and/or propagation rules are in conflict, override rules take over. Rather than trying to understand each rule, it may be easier to first look at the examples in the next section.

  • Individual values explicitly set by the user always override propagation and autospacing.
    See Example 7 below.
  • Propagation from explicitly set individual values for a specific device overrides propagation from custom default values for that device.
    See Example 6 below.
  • An explicitly set custom default for a particular device overrides a propagated individual setting.
    See Example 8 below.
  • Autospacing overrides propagation from desktop custom defaults and individual settings and uses the built-in default.
    See Examples 2, 3, and 6 below.

Examples

Here's a table of examples, with a description of each example below the table.

  • Parentheses () indicate propagated values. 
  • Square brackets [] in the mobile column indicate autospacing values. 
  • In the mobile column, the first value in each row indicates the final value when autospacing is enabled. The second value indicates the final value when autospacing is disabled.
  • A verbal description of each example appears underneath the table.

Examples of row margin settings

Example number Built-in default Custom default (desktop / tablet / mobile) Individual desktop / tablet / mobile Individual mobile [+/- autospacing]
1 0px -- (0) / (0) (0) / (0)
2 0px 10 / (10) / (10) (10) / (10) [0] / (10)
3 0px -- 20 / (20) [0] / (20)
4 0px 12 / 10 / 5 (12) / (10) [5] / (5)
5 0px -- 20 / 15 [0] / (20)
6 0px 10 / (10) / (10) 20 / (20) [0] / (20)
7 0px -- 20 / (20) 5 / 5
8 0px 25 / 20 / 15 10 / (20) (15) / (15)

Here's an explanation of each example.

  • Example 1
    Propagation of built-in defaults.
    With no explicit custom default or individual settings, the built-in defaults propagate to all individual row margins. Autospacing sets the mobile value to the built-in default of 0px.
  • Example 2
    Propagation of custom defaults, autospacing override.
    A custom default margin is set to 10px for desktop only. That value propagates to the tablet and mobile custom defaults. That value also propagates to individual desktop and tablet settings. However, since there's no specific default or individual value set for mobile, autospacing sets the individual mobile value to the built-in default of 0px. If autospacing is disabled, the mobile value is the custom desktop default value.
  • Example 3
    Propagation of individual settings, autospacing override.
    An individual margin setting is entered for large devices. It propagates to tablet. Autospacing sets the mobile margins to the built-in default of 0 px. If autospacing is disabled, the mobile value is the propagated individual desktop value.
  • Example 4
    Propagation of explicitly set custom defaults, autospacing to custom default.
    Explicit custom default values are set for desktop, tablet, and mobile. Individual desktop and tablet settings propagate from the custom default desktop and tablet settings respectively. Autospacing sets the mobile value to the custom default mobile value. With autospacing disabled, the value is the propagated custom default mobile value.
  • Example 5
    Propagation of individual settings, autospacing override.
    Individual margins are set for desktop and tablet. There was no custom setting for mobile, so autospacing sets the mobile value to the built-in default 0px. With autospacing disabled, the mobile value is the propagated desktop value.
  • Example 6
    Propagation of individual settings, autospacing override.
    A custom default margin is set to 10px for desktop, and a custom individual margin is set to 20px for desktop. The value for tablet propagates from the individual desktop setting. Since there's no explicit setting for mobile devices, autospacing uses the built-in default value of 0px. With autospacing disabled, the individual desktop setting propagates to mobile.
  • Example 7
    Explicit and propagated individual values override autospacing.
    Explicit individual values are set for desktop and mobile. The tablet value is propagated from the individual desktop value. Because the mobile value is explicitly set, the value is the same whether or not autospacing is enabled.
  • Example 8
    Explicit custom default value overrides individual propagation.
    A custom default value is set separately for desktop, tablet, and mobile. An individual value is set for desktop only. The individual tablet value propagates from the custom default tablet setting. For the mobile value, autospacing sets the value to the custom default set for mobile. If autospacing is disabled, the mobile value propagates from the custom default mobile value.