Adjust an element's padding and margin by dragging its edges directly in the preview — the way Webflow does. Hover any element in the page editor and draggable spacing bars appear on its edges: inner green bars are padding, outer orange bars are margin. Drag a bar and the spacing changes live; let go and it's saved onto that element like any other design change.
How to use it
- Open a page in the editor and hover an element in the preview. The floating element toolbar appears, and — for elements that support it — eight thin spacing bars pin to its edges.
- Green bars (inner edges) = padding. Orange bars (outer edges) = margin.
- Drag a bar toward or away from the element. A small readout shows the live value (e.g.
32px · pt-8). - Release to apply. The change is saved onto that element and shows up in the design panel's padding/margin controls too — it's the same setting, just edited on the canvas instead of in the sidebar.
Dragging outward always increases the spacing on that side; dragging inward decreases it. Margin never goes below zero.
Snap, axis, and exact values (modifier keys)
By default a drag snaps to the standard spacing scale so your values stay clean and consistent (0, 1, 2, 4, 6, 8, 12, 16, 24 …). Two modifier keys change what a drag does:
| Drag | Result | Example |
|---|---|---|
| Plain drag | That one side, snapped to the scale | top bar → pt-8 |
| Hold Alt | Both sides of that axis together (symmetric) | top bar + Alt → py-8 (top and bottom) |
| Hold Shift | Exact pixels (fine control, off the scale) | top bar + Shift → pt-[23px] |
| Alt + Shift | Whole axis, exact pixels | py-[23px] |
Each drag only touches the side (or axis) you grabbed — a broader value already on the element (like a uniform p-8) stays put underneath, so you can nudge just the top of a card without disturbing the rest.
Responsive spacing (breakpoints)
Spacing handles respect the device size you're previewing. Switch the preview to a phone, tablet, or a specific width using the device toggle (see Preview Screen Sizes), and a drag writes spacing for that breakpoint and up without touching your base value.
- Previewing at desktop / full width → base spacing (applies everywhere), e.g.
pt-8. - Previewing at tablet (768px) →
md:pt-8— only affects tablet and larger. - Previewing at a larger width →
lg:/xl:/2xl:as appropriate.
This means you can set generous padding on desktop and tighten it on mobile just by switching the preview and dragging — the same per-breakpoint model the sidebar's spacing controls use, so the two always agree.
Choosing when the bars appear
Where the bars show is a builder-wide preference in Settings → Builder → On-canvas spacing handles:
- Always on when targeted (default) — bars appear on every supported element you hover, just like the element toolbar. This matches how Webflow surfaces spacing.
- Toolbar toggle — the bars stay hidden until you click the spacing button (⧉) on the element toolbar, then they arm for the elements you hover. Choose this if you find the bars distracting while browsing the page.
The setting applies to the whole builder and saves as soon as you change it.
Which elements support it
Spacing handles appear on the elements whose own box you'd expect to pad or space — containers, cards, headings, text blocks, icons, badges, dividers, links, and the like. They're intentionally hidden on a handful of components (images, buttons, videos) whose visible box is a wrapper with its own separate spacing controls, so a drag can never land the value on the wrong element. For those, use the padding/margin controls in the design panel.
Where the value goes
A spacing drag edits the element's classes — exactly the field the design panel's padding and margin controls write to — so:
- It's a normal editor change: it participates in Undo/Redo (Cmd/Ctrl + Z) and is written when you Save the page.
- Snapped drags produce clean utility classes (
pt-8,mb-6,md:px-4); Shift drags produce exact-pixel classes (pt-[23px]). Both render on your live site after save — no build step required. - The design panel and the on-canvas bars are two views of the same value, so editing in one is reflected in the other.
Related
- Preview Screen Sizes — the device/breakpoint toggle that drives responsive spacing.
- Page Editor Tour — the element toolbar the spacing bars build on.
- Cascading Design Tabs — the sidebar design panel where the same padding/margin lives.