Contents

Widget Margin

Space around the outside of the whole widget, between it and the host page.

Where to find it
Labelled Margin in the Widget Settings drawer (gear in the widget 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 widget is the main way to inset an embed on the page that hosts it. It pushes the widget away from neighbouring content on your site — it does not change the space inside the widget 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 widget centred on a wide page.

When you would use it

  • An embedded widget sits flush against other page content and needs breathing room.
  • You are centring a capped-width widget: Max Width plus left and right Margin of "auto".

How to change it

  1. Open the widget, click the gear in the header to open Widget Settings, then "Margin".
  2. Set the sides you care about. Use "Same value for all resolutions" when phone, tablet, and desktop should match.
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

  • 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 widget; Margin is outside it. Row and column margins are separate settings on those scopes.

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