Why Is There a White Gap at the Top of My Webpage? Causes and Fixes

You open your new webpage and everything looks almost right, except for one annoying problem. There is a plain white strip sitting above your header, pushing your logo and navigation down the page. You did not add any padding there, you did not insert an empty section, and yet the gap will not go away.

This is one of the most common layout surprises for beginners, and the good news is that it is almost never a browser bug. The gap comes from default browser styles, collapsing margins, or a small piece of markup you may not even notice. Once you know where to look, you can remove it in a few minutes and stop it from coming back on future pages.

Quick Answer

The white gap above your header is usually caused by the default margin on the body element or by a top margin on a heading or paragraph inside your header collapsing through its parent. Remove it by setting margin: 0 on body in CSS and checking the first element inside your header for an unwanted top margin. Adding a simple CSS reset at the top of your stylesheet prevents the problem on every page.

Why Browsers Add Space You Did Not Ask For

Every browser ships with a built-in user agent stylesheet that gives elements readable defaults. Among them, the body element gets a margin of 8px on all sides in most browsers.

That 8px body margin is the number one cause of the white gap. If your header has a dark or coloured background, the white margin around the body shows through above it and the header appears to start lower than it should. Because the margin belongs to the body and not to your header, changing the header alone will not fix it.

The second cause is margin collapsing. When a parent element has no padding, border, or other separation at its top edge, the top margin of its first child can pass through the parent and appear outside it. So a heading inside your header with margin-top: 20px can push the whole header down, even though the margin was meant to create space inside the header.

How to Confirm Which Cause You Have

Before you change anything, inspect the page so you fix the real problem instead of guessing.

1. Open the page in your browser and right-click the white gap area, then choose Inspect.
2. Select the body element in the elements panel and look at the computed styles for margin.
3. If you see margin: 8px coming from the user agent stylesheet, the body margin is your culprit.
4. Select your header and its first child, such as an h1 or p, and check for a top margin there.
5. Temporarily set those margins to 0 in the inspector and watch whether the gap disappears.

This quick test takes less than a minute and tells you exactly which rule to write in your own stylesheet.

Fix 1: Remove the Default Body Margin

The simplest and most reliable fix is to reset the body margin in your own CSS. Add this rule near the very top of your stylesheet, before your other layout rules:

body { margin: 0; }

That single line removes the white border around the whole page, not just at the top, because the default margin applies on all four sides. Your header background will then stretch to the very edges of the window, which is what most designs expect.

Many developers go one step further and use a universal reset for common elements:

* { margin: 0; padding: 0; box-sizing: border-box; }

This makes width calculations more predictable, but use it with awareness, since it also removes helpful defaults such as list indentation. A gentler option is to reset only the elements you use, such as body, headings, and p.

Fix 2: Stop Margin Collapsing Inside the Header

If the gap remains after resetting the body, collapsing margins are the likely reason. This happens most often when the first thing inside your header is a heading or a paragraph with a top margin, and the header itself has no top padding or border.

You have several clean ways to stop the collapse. Choose the one that fits your design best:

• Remove the top margin from the child element and use padding on the header instead to create the space you want inside it.
• Add a small amount of top padding to the header, such as padding-top: 1px or your real design value, which separates the parent and child margins.
• Add overflow: hidden or display: flow-root to the header, which creates a new block formatting context and keeps child margins inside.
• Use flexbox or grid on the header, because margins of flex and grid items do not collapse in the same way.

Of these, using padding on the header is usually the clearest choice. Padding is space inside the element, so it shows the header background colour, looks intentional, and behaves the same in every browser. If you want to understand the exact rules, the guide to how margin collapsing works in the CSS box model on MDN explains each case with helpful diagrams.

Fix 3: Check for Hidden Causes

Sometimes the gap survives both fixes above. When that happens, work through these less obvious causes one by one.

Whitespace and Inline Elements

If your header or the element before it is set to display: inline or inline-block, whitespace in your HTML and the line height of the text can create extra space. Setting the container to display: block or display: flex, or reducing stray line breaks between tags, often clears a mysterious few pixels.

Admin Bars and Fixed Toolbars

In WordPress or a similar system, a logged-in admin bar can push content down. Log out or use a private window to check what visitors see, and check your theme for padding-top added to make room for a fixed header.

Unclosed Tags and Extra Markup

An extra empty div, a stray paragraph inserted by a page builder, or a script that injects an element at the top of the body can all create real height on the page. Inspect the top of the body in your browser tools and look for any element you do not recognise. Our related guide on how to use browser developer tools to debug HTML and CSS problems walks through this inspection process step by step.

Prevent the Gap on Every New Page

Once you have fixed the current page, protect your future work with a small starter reset that you paste at the top of every new stylesheet:

1. Set margin: 0 on body.
2. Set sensible margins on headings and paragraphs, for example only a bottom margin, so spacing flows in one direction.
3. Add box-sizing: border-box globally so padding never makes elements wider than you expect.
4. Use padding on sections and headers for internal spacing instead of margins on their first children.

This habit takes seconds to apply and removes a whole family of spacing surprises, not just the gap above the header. Many professional workflows start from a tested reset file for exactly this reason, as explained in the discussion of the CSS box model and spacing behaviour on web.dev.

Common Mistakes to Avoid

It is tempting to force the header upward with negative margins, for example margin-top: -8px on the header. Avoid this. A negative margin hides the real cause, breaks as soon as the default changes, and can overlap other content on different screen sizes. Always remove the unwanted margin at its source instead.

Another mistake is adding the reset at the bottom of a long stylesheet after other rules have already set margins. Later rules and more specific rules can override your reset, leaving you confused about why it did not work. Put resets first, then build your design rules on top of them.

Finally, hard-refresh after editing CSS by holding Shift while reloading, so you do not chase a gap that was already fixed but hidden by a cached old file.

Conclusion

A white gap above your header almost always comes from the default 8px body margin or from a child margin collapsing through the header. Reset the body margin, create internal spacing with padding instead of collapsing margins, and inspect the page with developer tools if the gap persists. With a small reset at the top of your stylesheet, your headers will sit flush at the top of the page every time, on every project.

Frequently Asked Questions

Why does the gap appear in one browser but not another?

Each browser has slightly different default styles. If you have not reset the body margin, one browser may show an 8px gap while another shows a different amount. Adding your own reset makes the starting point identical everywhere.

Will setting body margin to zero break anything else?

No. It only removes the default white frame around the page. If you actually want space around your whole design, add it back deliberately with padding on a wrapper element so you control the exact amount and colour.

I removed the body margin but a small gap is still there. What next?

Check the first element inside your header for a top margin, which is likely collapsing through. Remove that margin and use padding on the header instead, or add display: flow-root to the header to contain the margin.

Does this also fix white gaps on the sides of my page?

Yes. The default body margin applies to all four sides, so resetting it removes the white frame on the left, right, and bottom as well. Side gaps can also come from elements wider than the screen, which needs a separate overflow fix.

Should I use a full CSS reset file for a small project?

A tiny personal reset covering body, headings, and paragraphs is enough for most small projects. A full reset file becomes more useful on larger sites where many elements and contributors are involved.