Margin

The empty space pushed outward from the edges of the column, separating it from its neighbours.

Where to find it
Labelled Margin in the "Selected Column" section of the Modify drawer.
Per device
Yes — you can set one value for every screen, or separate values for phone, tablet, and desktop.
Underlying CSS
margin

In plain English

Think of your column as a framed picture on a wall. Margin is the bare wall you leave around the frame so the picture is not touching the ones beside it.

Margin sits outside the column, so it never affects the background colour or the border — it just holds everything else at arm's length. If two cards are jammed together, adding margin is usually the fix.

You can set all four sides at once, or give the top, right, bottom, and left their own values. Margin also accepts negative numbers, which pull the column closer to (or overlapping) its neighbour, and the special value "auto", which is the standard trick for centring a column that has a fixed width.

What each option does

OptionWhat you will see
autoLet the browser decide. Setting left and right to auto centres a fixed-width column.
inheritCopy whatever margin the surrounding element has.
unsetClear any margin this column was given and fall back to the default.

When you would use it

  • Two blocks are touching and need breathing room between them.
  • You want a fixed-width column centred in its row: set the left and right margins to "auto".
  • A section needs to sit further down the page without moving anything inside it.

How to change it

  1. Select the column and open "Selected Column" in the Modify drawer, then "Margin".
  2. Leave "Same value for all sides" as it is to set one value everywhere, or switch to per-side inputs for a different top, right, bottom, and left.
  3. Type a number and pick a unit. Choose "auto" instead of a number when you want the browser to work it out — most often for centring.
  4. Uncheck "Same value for all resolutions" if phones need less space than desktops.
One value, or one per device? Every input in this setting sits under a “Same value for all resolutions” checkbox. Leave it checked for a single value everywhere, or uncheck it to give phones, tablets, and desktops their own. How per-device values work.

Watch out for

  • Margin is outside the column, so a background colour will not extend into it. If you wanted coloured space, you want Padding instead.
  • Vertical margins between two stacked elements can collapse into one — the browser uses the larger of the two rather than adding them together. If a gap looks smaller than the numbers suggest, this is usually why.
  • On some components the margin is applied to a thin wrapper around the component rather than the component itself. That is intentional and keeps the published page free of unnecessary markup.

Related settings

For developers

The technical reference for what this setting produces: MDN: margin. You do not need any of it to use the setting — it is there for whoever is building the components or debugging the published page.

Where to go next