- Where to find it
- Labelled Margin in the Collection Settings drawer (gear in the collection header).
- 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
Margin on the collection is the main way to inset the collection inside its parent widget or parent collection. It pushes the collection away from neighbouring content in its parent — it does not change the space inside the collection between rows.
You can set every side the same, or tune top, right, bottom, and left separately, including per device. The value "auto" on the left and right is the usual partner for Max Width when you want the collection centred in a wide parent.
When you would use it
- A collection sits flush against neighbouring content in its parent and needs breathing room.
- You are centring a capped-width collection: Max Width plus left and right Margin of "auto".
How to change it
- Open the collection, click the gear in the header to open Collection Settings, then "Margin".
- Set the sides you care about. Use "Same value for all resolutions" when phone, tablet, and desktop should match.
Watch out for
- This setting is left out on the editing canvas so the drag-and-drop surface stays full size. Open Preview (or check the published page) to see the margin applied.
- Padding is inside the collection; Margin is outside it. Row and column margins are separate settings on those scopes.
Related settings
- Collection Padding
- Collection Max Width
- Margin
- Using a CSS variable instead of a typed value
- Setting a different value per device
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
- Back to the full attribute reference
- The Composer — the editing surface these settings live in.
- Publishing — how a change like this reaches your live site.