How to add spacing between sections in Webflow?

Spacing between sections controls the visual rhythm of your page. Too little and everything looks cramped; too much and the page feels disconnected. Webflow gives you several ways to add spacing, each suited to different situations.

Using padding on section elements

The most common approach is adding vertical padding to your section elements:

1. Select the section in the Navigator or on the canvas
2. In the Style panel, add top and bottom padding
3. Typical values range from 64px to 120px depending on the design

Using padding on the section itself means every instance of that section class gets consistent spacing. This is the best approach when you want uniform spacing across similar sections.

Tip: Define a reusable class like section-padding with your standard top and bottom padding. Apply it to all sections for consistency across the entire site.

Using margin for section gaps

Margin works too, but behaves differently from padding:

• Padding is part of the element — backgrounds and borders extend into it

• Margin is space outside the element — backgrounds stop at the padding edge

Use margin when you want space between sections without extending any background color or border. Use padding when the section has a background that should fill the spacing area.

Using a spacer element

Webflow's Spacer component (available from the Add Elements panel) inserts a blank div with adjustable height. This is the least recommended approach because:

• It adds unnecessary DOM elements

• It's harder to maintain at scale

• It doesn't respond well to design system changes

Use spacers only for quick prototyping or one-off adjustments.

Using gap in flexbox or grid layouts

If your sections are children of a flex or grid container, you can use the gap property on the parent:

1. Set the parent to display: flex with flex-direction: column
2. Set gap to your desired spacing value

Gap applies uniform spacing between all children without adding space before the first or after the last child. This is cleaner than margin when sections share a parent container.

Best practice

Pick one method and stick with it across your project. Mixing padding, margin, and spacers creates inconsistency. A shared section class with standard padding is the most maintainable approach for most projects.