WordPress White Gap: How to Find and Fix It with CSS

A white gap on a WordPress page is usually caused by spacing, a minimum height, or an overflowing element in the theme, page builder, or custom CSS. Find the element creating it with your browser’s inspector, then correct that specific rule; avoid hiding the gap with a broad negative margin unless you have confirmed the cause.

What a WordPress white gap can mean

“White gap” is not one specific WordPress error. It can refer to empty space between sections, a blank strip at the side of the page, a large area below the footer, or a white band that appears only on mobile. The visible background may be white, but the underlying cause is usually an element or layout rule occupying space.

Common sources include top or bottom margins, padding, a section with a fixed or minimum height, an empty block, a hidden page-builder row, or an image or other element extending beyond its container. A gap that appears on every page often points to a shared header, footer, or theme layout. One limited to a single page is more likely to come from that page’s content or its template.

Find the element with browser developer tools

Use the inspector before editing CSS. In Chrome, Edge, and Firefox, right-click near the gap and choose Inspect or Inspect element. Safari offers Web Inspector after it is enabled in Safari settings. You can also open developer tools with the browser’s keyboard shortcut and use the element picker to select the page area.

Inspect the blank area and look at the highlighted element in the page structure. If the browser selects a large section, move through its parent and child elements to identify the smallest element responsible.
In the styles panel, check computed values for margin, padding, height, min-height, and position. The computed panel shows the final value after theme and plugin rules are combined.
Toggle suspicious declarations off temporarily. If the gap closes, note the selector and property. This test changes only your browser’s preview; it does not save a change to WordPress.
Repeat at the screen width where the problem occurs. Responsive CSS can add spacing only at a particular breakpoint, so a desktop inspection may not reveal a mobile-only rule.

When a click selects nothing, inspect nearby elements and their containers. The visible white area may be the page background showing through, rather than a separate white block. If the page has a horizontal gap, check whether an element is wider than the viewport; horizontal overflow can make the layout appear misaligned.

Fix the cause with targeted CSS

Once you have identified the element and rule, make the smallest change that addresses it. For example, if inspection shows that a specific content section has excessive bottom padding, a targeted rule might be:

.page-id-123 .content-section {
  padding-bottom: 0;
}

Replace 123 and .content-section with the page ID and selector that actually appear on your site. WordPress themes do not all use the same class names, so copying a selector from another site may do nothing or affect the wrong area.

Other fixes depend on what the inspector reveals:

For unwanted space inside a section, adjust its padding; for space outside it, adjust its margin.
For a blank section with an unnecessary minimum height, remove or reduce min-height for the affected screen size.
For an empty block or page-builder row, remove it in the editor if it is not needed. Editing the content is often cleaner than overriding it with CSS.
For an element wider than its container, correct its width or the parent layout. Do not apply overflow: hidden automatically; it can cut off menus, shadows, and other content.

Test a CSS change in the inspector first, then add it through the WordPress Additional CSS area, commonly found under Appearance → Customize → Additional CSS in themes that provide the Customizer. Some newer block themes or site setups expose styling in different locations. A child theme or the theme’s documented custom-CSS facility is another option. Avoid editing a parent theme’s files directly, because an update can overwrite those changes.

Check mobile rules, caching, and page builders

A rule can be correct on desktop but wrong on a narrower screen. Look for media queries such as @media (max-width: 768px) in the styles panel, and use the browser’s responsive-device mode to test several widths. A focused adjustment could look like this:

@media (max-width: 768px) {
  .page-id-123 .content-section {
    padding-bottom: 1rem;
  }
}

Use the selector and breakpoint that suit the actual layout; the example is not a universal WordPress setting. Page builders may also store spacing in a section’s design controls. If a builder setting generates the unwanted CSS, changing that control can be more reliable than layering another rule over it.

After saving, clear any WordPress caching or optimization plugin cache, and refresh the browser. A content delivery network or host may also cache pages. Check in a private browsing window or another browser to distinguish a stale cached page from a change that did not apply. If the CSS is present but crossed out in developer tools, another rule may have higher specificity or load later. Prefer a more precise selector over repeatedly adding !important.

Common mistakes and safer alternatives

A negative margin can pull an element over the gap, but it does not remove the underlying cause. It may overlap content at other screen widths or create a new problem when page text changes. Likewise, a global rule such as section { margin: 0; } can remove intended spacing across the whole site. Scope a fix to the affected page and component, then check nearby content, the header, and the footer.

Also distinguish layout space from an actual blank region inside an image or background. If the inspector shows that the image itself includes white pixels, CSS spacing changes will not remove them; edit or replace the image instead. If the gap began after a plugin, theme, or builder change, temporarily compare the relevant settings or recent changes in a staging or test environment where available. Do not deactivate plugins on a live site without considering the effect on visitors and site functions.

Frequently Asked Questions

Why is there a white space at the top of my WordPress page?
It may come from the header, a top margin or padding, an admin-bar layout adjustment while logged in, or an empty block. Inspect the first element below the top edge and compare the page while logged in and logged out.

How do I remove a white gap at the bottom of a page?
Inspect the last content section and the footer. Check for bottom margin or padding, an empty builder row, or a minimum-height setting. Fix the rule or remove the unused section rather than applying a negative margin to the footer.

Why does the gap show only on mobile?
A responsive rule may change spacing or height at a narrow breakpoint, or an element may overflow its container. Inspect the page in responsive mode at the affected width and check the active media-query styles.

Where do I add custom CSS in WordPress?
Many classic themes provide Appearance → Customize → Additional CSS. Block themes and some managed setups may use a different styling interface. You can also use a child theme or a supported custom-CSS feature, depending on the site.

Why did my CSS fix not appear?
Check that the selector matches the element, that the rule is not overridden, and that you saved it in the correct place. Clear relevant caches and inspect the page again; a stale cached stylesheet can make a valid change appear ineffective.

General steps for current mainstream versions; menus can differ by device and version. See the disclaimer or report an error.

More in this bed

The whole Tech How-To bed →