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>
This question is related to
html
css
asp.net-mvc-4
razor
The answer is
overflow: auto
Using overflow: auto on the <body> tag is a cleaner solution and will work a charm.
I Just put CSS in my <div> now working in code
position: relative; top: -22px;
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.
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;
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"> </div>
Remove HTML Entities
<div class="sample"></div>
Try this
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
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; }
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;
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 :)
Source: Stackoverflow.com