How do I add margin and padding in Webflow?

Choose margin or padding

Spacing is the room outside an element or the room inside it. Margin sits outside the border. Padding sits inside, between the content and the border. Both live under Spacing in the Style panel. You can set one side, a pair of opposite sides, or all four sides.

Select the element on the canvas first. Read the class in the Selector. Spacing is a style, so every element with that class gets the same margin and padding. A card class with 24px of padding pads every card. When only the featured card needs more room, use a combo class on that card.

Style panel values cascade from the breakpoint where you set them. Desktop spacing flows down to tablet and both phone widths until you override it. A change on tablet flows down to mobile landscape and mobile portrait. It does not flow back up to desktop. Click the mobile portrait icon before you tighten spacing for a phone.

Example: a pricing card should keep its text off the border, and the next card should sit below it. Put padding on the card. Put margin on the bottom of the card, or on the parent that stacks the cards.

Set one side, opposite sides, or every side

Drag the margin or padding control on the side you want. You can also click that control, choose a preset, or type a number.

Opposite sides move together when you hold Option on Mac or Alt on Windows. Drag one control, click a preset, or type a value while that key is held. The top and bottom can share one number while the left and right stay as they were.

All four sides share one number when you hold Shift and drag one side. You can also click one side's control and choose a preset or type a value while Shift is held.

Example: click the card, hold Shift, and drag the padding until every side is 24px. Then set only the bottom margin to 40px, without Shift, so the cards stack with a gap and the side margins stay untouched. On mobile portrait, select the card and lower the bottom margin if the stack feels too tall. Desktop keeps 40px because the phone value does not cascade upward.

Change the unit, or clear a side

Pixels are the default. Click any spacing control and open the unit menu to the right of the input. The menu includes PX, %, EM, VW, and VH. You can also type the number and the unit into the field.

To put the same unit on every side, click one side, hold Shift, type the unit you want, and press Enter.

Clear one side by holding Option on Mac or Alt on Windows and clicking the blue value on that control. Clearing a value that was set on a larger breakpoint removes it from the breakpoints that inherited it. If you clear a tablet margin, the phone breakpoints that were using it lose it too.

The Center element button under Spacing sets the left and right margins to auto and does not change Display. Those auto margins fill leftover horizontal space. An inline element cannot use the button, because an inline setting has no leftover horizontal space. Use a typed padding value when the task is room inside the box.

Use a negative margin only when you want overlap

A negative margin pulls an element out of the place it would normally occupy. Type a negative number, such as -40, on the side that should overlap. The element moves across the edge of its parent by that amount.

Use it for a deliberate overlap, such as a photo that should sit slightly on top of the section above it. Do not use it to close a gap you do not understand yet. A negative top margin can drag a heading under the previous section, or off the screen, and the next person will not see why the heading is gone.

Example: a portrait should overlap the hero by 40px. Select the portrait's wrapper, set the top margin to -40px, and leave the padding alone. Check tablet and mobile portrait. A negative margin that looks small on desktop can shove the portrait off a narrow screen. Override it on the phone breakpoint if the overlap is only meant for desktop.

Fix a collapsed gap or a missing footer

Margins on neighboring elements can combine into one margin. Webflow calls this collapsing margins. Two stacked blocks, one with 40px of bottom margin and the next with 40px of top margin, may show a 40px gap rather than 80px. Padding does not behave that way. If you need the full 80px, put the space in padding, or keep the margin on only one of the two elements. Margins between adjacent grid children do not collapse, so a grid can show both values.

One known Designer problem is a footer you cannot reach. It often happens when the navbar is absolutely positioned and a top margin on the first element pushes the rest of the page out of the Body. Do not add a top margin to that first element when it is not fixed. Add top padding to the Body element instead, so the content starts lower and the footer stays in the document.

Publish and check the card stack on desktop and on a phone. The text should sit inside the card with even padding. The gap between cards should match the single margin you intended. If the gap is half of what you added, the margins collapsed. If the footer is missing in the Designer, remove the top margin on the first section and pad the Body. If every card grew when you meant to pad one, the spacing is on the shared class. Move it to a combo class and publish again.