White space at top of page

html css asp.net-mvc-4 razor

132,785

Solution 1

Add a css reset to the top of your website style sheet, different browsers render some default margin and padding and perhaps external style sheets do something you are not aware of too, a css reset will just initialize a fresh palette so to speak:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

UPDATE: Use the Universal Selector Instead: @Frank mentioned that you can use the Universal Selector: * instead of listing all the elements, and this selector looks like it is cross browser compatible in all major browsers:

* {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }

Solution 2

If nothing of the above helps, check if there is margin-top set on some of the (some levels below) nested DOM element(s).

It will be not recognizable when you inspect body element itself in the debugger. It will only be visible when you unfold several elements nested down in body element in Chrome Dev Tools elements debugger and check if there is one of them with margin-top set.

The below is the upper part of a site screen shot and the corresponding Chrome Dev Tools view when you inspect body tag.

No sign of top margin here and you have resetted all the browser-scpecific CSS properties as per answers above but that unwanted white space is still here.

The following is a view when you inspect the right nested element. It is clearly seen the orange'ish top-margin is set on it. This is the one that causes the white space on top of body element.

On that found element replace margin-top with padding-top if you need space above it and yet not to leak it above the body tag.

Hope that helps :)

Solution 3

Aside from the css reset, I also added the following to the css of my div container and that fixed it.

position: relative;
top: -22px;

Solution 4

Old question, but I just ran into this. Sometimes your files are UTF-8 with a BOM at the start, and your template engine doesn't like that. So when you include your template, you get another (invisible) BOM inserted into your page...

<body>{INVISIBLE BOM HERE}...</body>

This causes a gap at the start of your page, where the browser renders the BOM, but it looks invisible to you (and in the inspector, just shows up as whitespace/quotes.

Save your template files as UTF-8 without BOM, or change your template engine to correctly handle UTF8/BOM documents.

Solution 5

Try this

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

View more solutions

132,785

Author by

dan_vitch

Updated on July 08, 2022

Comments

dan_vitch almost 2 years
I have about 20 pixels of white space at the top of my page. I have inspected every element and nothing has padding or margin in this area. When I inspect the body element it does NOT include this space. When I inspect the html element is does include this space. Also if I delete
```
<!DOCTYPE html>
```
the white space goes away.

Here is my main layout
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Title</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    @RenderSection("Css", false)
</head>

<body>
    @RenderSection("JavaScript", false)
</body>
</html>
```
dan_vitch over 10 years

this makes the white space go away
Frank over 8 years

You can achieve the same effect by using * to select all elements. Like * { css } This way you won't have to list every element.
cyrf over 8 years

height:100% causes a scrollbar for me on Chrome.
Milan and Friends over 8 years

@cyrf just add box-sizing property with border-box value e.g. box-sizing: border-box;
Brian Ogden about 8 years

@Frank, thanks I updated my answer with your recommendation, good one!
Andrew Killen almost 8 years

To be honest its not a good idea to use * as the selector. Your asking the browser to add styles to things that don't need it such as the <script> tag, or add styles to inline elements that don't have anything set in the first place. This only serves to get the browser to do more work to display the page. While this may be small, it will make things slower in general as there is more for the browser to think about.
Brian Ogden almost 8 years

Well at least selector both choices are there, hopefully people read the comments int he answer before making there final decision.
Brian Ogden over 7 years

@bayedbest than you have an issue with the order of your styles sheets, trying putting this last
Ravi Shanker Reddy almost 7 years

its removed the white sapce in my case. But the buttons are missing now which was working before
Brian Ogden almost 7 years

@RaviShankerReddy are you just a beginner at CSS? A CSS reset breaking your CSS for your buttons demonstrates you probably do not know what your CSS for your buttons is doing fully
Ravi Shanker Reddy almost 7 years

Thanks for reply. The CSS reset is over-riding with my button CSS. Fixed now
Valentine Shi about 5 years

If this solution does not work there can be another culprit. Look at my answer below stackoverflow.com/a/55471272/6597265
Admin about 3 years

Jeez I spent an hour stuck on this, thanks mate!
Axelle almost 3 years

Not only does this not work to remove the whitespace, it breaks all other CSS.
Brian Ogden almost 3 years

@Axelle lol, ya because your CSS is probably a mess
Andrew Morton over 2 years

Using the rule *, *::after, *::before { box-sizing: border-box; } can also help to make elements behave in more of an expected fashion.