White space at top of page

Question

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>

Chrome is the browser I am using. I dumped the html here. Sorry for the poor formatting https://docs.google.com/document/d/1a050Lu76gd2Gu1JlxRsNlZmUjzNYYXiNLFMWlx8vlU4/edit?usp=sharing — dan_vitch, Sep 12 '13 at 18:57

score 94 · Accepted Answer · edited May 23 '17 at 12:02

94

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;
    }

edited May 23 '17 at 12:02

Community

1
1

answered Sep 12 '13 at 19:06

Brian Ogden

18,439
10
97
176

1

this makes the white space go away – dan_vitch Sep 12 '13 at 19:13
2

You can achieve the same effect by using * to select all elements. Like `* { css }` This way you won't have to list every element. – Frank Dec 16 '15 at 19:45
1

@Frank, thanks I updated my answer with your recommendation, good one! – Brian Ogden Feb 28 '16 at 00:42
4

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 – Andrew Killen May 20 '16 at 13:54
1

Well at least selector both choices are there, hopefully people read the comments int he answer before making there final decision. – Brian Ogden May 20 '16 at 16:04
@bayedbest than you have an issue with the order of your styles sheets, trying putting this last – Brian Ogden Nov 21 '16 at 15:20
its removed the white sapce in my case. But the buttons are missing now which was working before – Ravi Shanker Reddy Aug 03 '17 at 14:41
@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 – Brian Ogden Aug 03 '17 at 16:25
Thanks for reply. The CSS reset is over-riding with my button CSS. Fixed now – Ravi Shanker Reddy Aug 04 '17 at 06:05
If this solution does not work there can be another culprit. Look at my answer below https://stackoverflow.com/a/55471272/6597265 – Valentine Shi Apr 04 '19 at 05:38
Not only does this not work to remove the whitespace, it breaks all other CSS. – Axelle Aug 04 '21 at 12:54
@Axelle lol, ya because your CSS is probably a mess – Brian Ogden Aug 05 '21 at 19:27
Using the rule `*, *::after, *::before { box-sizing: border-box; }` can also help to make elements behave in more of an expected fashion. – Andrew Morton Jan 12 '22 at 16:20

Valentine Shi · Answer 2 · 2022-08-20T11:06:17.147

If none of the other answers help, 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 :)

score 6 · Answer 3 · answered Mar 10 '15 at 14:57

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.

score 6 · Answer 4 · edited Oct 05 '17 at 00:55

6

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;

edited Oct 05 '17 at 00:55

answered Oct 05 '17 at 00:29

David Hernandez

79
1
2

score 5 · Answer 5 · answered Dec 25 '20 at 19:54

5

This particular answer shows that h1 elements have an implicit margin-top that can cause the whitespace

https://stackoverflow.com/a/20021854/2129219

The suggestion to remove it is helpful, and certainly eye opening to how this is happening

h1 { margin-top: 0; }

answered Dec 25 '20 at 19:54

Colin D

2,822
1
31
38

2

Jeez I spent an hour stuck on this, thanks mate! – Mar 30 '21 at 10:55

score 3 · Answer 6 · answered Sep 12 '13 at 19:06

3

Try this

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

answered Sep 12 '13 at 19:06

Milan and Friends

5,560
1
20
28

3

`height:100%` causes a scrollbar for me on Chrome. – cyrf Feb 12 '16 at 02:09
@cyrf just add box-sizing property with border-box value e.g. box-sizing: border-box; – Milan and Friends Feb 13 '16 at 14:59

score 1 · Answer 7 · answered Nov 18 '16 at 08:16

1

There could be many reasons that you are getting white space as mentioned above. Suppose if you have empty div element with HTML Entities also cause the error.
Example

<div class="sample">&nbsp;</div>

Remove HTML Entities

<div class="sample"></div>

answered Nov 18 '16 at 08:16

Praveen M P

11,314
7
34
41

score 1 · Answer 8 · answered May 09 '19 at 20:44

1

overflow: auto

Using overflow: auto on the <body> tag is a cleaner solution and will work a charm.

answered May 09 '19 at 20:44

gilbert-v

1,263
1
11
23

score 0 · Answer 9 · answered Oct 02 '13 at 00:38

0

Check for any webkit styles being applied to elements like ul, h4 etc. For me it was margin-before and after causing this.

-webkit-margin-before: 1.33em;
-webkit-margin-after: 1.33em;

answered Oct 02 '13 at 00:38

Beetny

416
4
9

score 0 · Answer 10 · answered Jun 04 '22 at 19:46

@Valentine Shi's answer (https://stackoverflow.com/a/55471272/153422) half-worked for me.

I found that the browser itself was imposing a pointless and unwanted '20px margin' top and bottom of each page, hidden in the print settings.

Chrome always defaults to "margins: default" when printing. But they aren't 'default'. They are "Google's unwanted overrides that change the margins to something else".

The downside: every time anyone prints they have to be taught to remove Google's 'default' - it doesn't save it.

score 0 · Answer 11 · answered Jul 25 '22 at 19:17

Solution:

You can use one of the following:

Answer1: The * selector means, select all elements and set their margin and padding to 0.

* {
    margin: 0;
    padding: 0;
  }

Answer2: Select the h1 element and set the margin top to zero.

h1{
    color:red;
    font-family: 'Times New Roman', Times, serif;
    border: 1px solid blue;
    text-align: center;
    font-size: 50px;
    margin-top: 0;
 }

score -3 · Answer 12 · edited Mar 07 '18 at 17:18

-3

I Just put CSS in my <div> now working in code

position: relative; top: -22px;

edited Mar 07 '18 at 17:18

Paul Roub

36,322
27
84
93

answered Mar 07 '18 at 17:10

Siddharth Shukla

1,063
15
14

White space at top of page

12 Answers12

overflow: auto

Solution:

Linked

Related