How to remove unwanted white space in Webflow?

Mysterious white space is one of the most frequent layout issues in Webflow. You build a section, and there's a gap you didn't intend — between elements, at the top of a page, or at the bottom of a section. The cause is usually one of a few common culprits.

Check for default margins on elements

Browsers apply default margins to certain elements, and Webflow inherits these. The most common offenders:

• Headings (h1–h6) — browsers add top and bottom margins by default

• Paragraphs (p) — default bottom margin

• Lists (ul, ol) — default top and bottom margin and left padding

To fix this, select the element in the Style panel and set its margins to zero. If you want consistent spacing, remove default margins and add your own using padding or margin on a wrapper or parent.

Global fix: Add a base styles rule that resets margins on common text elements, then apply spacing intentionally through classes.

Check for padding on the body

The body element sometimes has padding applied — either by a base style or accidentally during early layout work. Select the body in the Navigator and check the Style panel for any top, bottom, or side padding. Remove it if it's not intentional.

Check section padding and margins

Sections often have default padding added during setup. Select the section causing the gap and review its padding values. If the gap appears between two sections, check both the bottom padding of the upper section and the top padding of the lower one.

Inline block whitespace gaps

When elements are set to display: inline-block, HTML whitespace (line breaks and spaces in the code) renders as a small gap between them. This shows up as unwanted space between images, buttons, or nav items.

Fixes:

• Set the parent to display: flex instead of relying on inline-block

• Or set the parent's font-size: 0 and restore font size on the children

Flexbox is the cleaner solution in almost every case.

Image whitespace

Images set to display: inline have a small gap below them caused by descender space reserved for text. Fix this by setting the image to display: block.

Hidden overflow as a diagnostic

If you can't identify the source of white space, temporarily add overflow: hidden to the suspected parent element. If the gap disappears, the cause is a child element's margin collapsing through the parent. Fix this by adding overflow: hidden permanently, or by adding padding or a border to the parent to prevent margin collapse.