Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
There is no single CSS rule that reliably removes every white gap on a WordPress page. The space may come from margin, padding, a block or layout gap, a spacer block, or a theme-specific rule. Identify the element and property responsible, then change only that element and property.
First identify where the gap appears
Note whether the space is at the top of the page, between the header and content, between two blocks, around an image, or above the footer. Also check whether it appears on one page or across the site. Location and scope help narrow down which block, template, or container to inspect.
A white area alone does not reveal its cause. Margin is space outside an element’s border; padding is space between its content and border. WordPress documents these as distinct spacing controls in its Styles overview.
Check WordPress’s editor controls before adding CSS
Block themes: inspect Styles and the relevant template
In a block theme, open the Site Editor and inspect the template, template part, and block around the gap. Review the available Layout and Spacing controls in Styles first. WordPress recommends starting with Styles options before adding custom CSS. The available controls vary by theme and block; the Work with blocks guide explains block editing.
#1 Best Overall
The Site Editor guide illustrates one possible top-of-home-page fix: reduce padding at the bottom of the header template part and at the top of the content area. That example is not a universal setting; adjust only the control that corresponds to the gap on your site.
Where custom CSS is entered
WordPress documents a site-wide Additional CSS editor in Styles. In WordPress 6.9, its controls moved into the Styles screen’s ellipsis menu, so older menu instructions may not match the current interface. CSS entered through Styles is not overwritten by a theme update, but it is cleared if you switch themes. Depending on the theme and editor context, the Customizer may also provide a CSS entry point. See WordPress’s Styles overview and CSS – Advanced Administration Handbook.
Inspect the element that owns the space
If the editor controls do not make the cause clear, use your browser’s developer tools to select the blank area or an adjacent element. Check computed margin, padding, and gap, along with the element’s dimensions and parent layout. The space may belong to the element above, the one below, or their shared container. Also look for an actual spacer block.
WordPress block spacing behaves differently depending on the layout. In a flow layout, block gap is generally applied as margin-top; in flex and grid layouts, it uses the CSS gap property. WordPress generates container-specific CSS, so the selector and value depend on the page and theme. See the WordPress spacing documentation.
Write a scoped CSS fix
When inspection identifies the responsible block and property, target that block and side. If practical, add a class to the specific block and use it in your CSS. For example, if inspection confirms that the block’s top margin creates the gap, the rule could be:
.your-specific-block-class {
margin-block-start: 0;
}This is an illustrative pattern, not a ready-made fix: replace the example class and use the property that matches what you found. If padding is responsible, adjust the appropriate padding property instead. If a flex or grid container’s gap is responsible, target that container’s gap. A rule such as footer { margin-top: 0; } is appropriate only when the relevant footer margin is confirmed as the cause.
Avoid broad resets such as * { margin: 0; padding: 0; } and sweeping !important rules. They can remove intentional spacing throughout the site, rather than fixing the one gap.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Test the change on the affected layouts
After adding or changing CSS, check the affected page on desktop and mobile, and look at the content immediately before and after the edited element. A global block-gap change can tighten multiple areas, not just the one you intended to fix; one WordPress.org support case describes this kind of concern. Keep the change scoped and preserve spacing that is serving a purpose.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
