CODEWITHSUNDEEP
csshtml
matt
matt

Reputation: 44303

css & html5: why does my body have a spacing at the top?

I don't get it. I have …

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

However my browser is always showing the vertical scrollbar even if the content is not as hight as the window.

In the following screenshot you can see that there is this little spacing on top if I inspect the body. The htmldoes not have this spacing.

Any idea what could cause that?

enter image description here

Upvotes: 31

Views: 23894

Answers (4)

jpaugh
jpaugh

Reputation: 7035

I had this for a completely different reason: I was inadvertently inserting textual characters (specifically, semicolons) in the head, which were somehow translated into the body, where they were hidden by other markup and/or css. But, the space remained.

In my case, neither the body itself, nor any obvious first-child elements had any top margin or padding. Extra text did show up as the first (textual) child of the body, however it did not exactly correspond to the text I needed to remove in order to solve the problem. Specifically, I saw the following text, with a lot of extra white-space:

<body>
";




<!-- rest of stuff here -->

Note that I am using an HTML templating engine (specifically Razor), so all bets are off as to how this transmutation from ; ; to "; occurred.

Upvotes: 0

James John McGuire &#39;Jahmic&#39;
James John McGuire &#39;Jahmic&#39;

Reputation: 12634

Late to the conversation, but thought this might help some...

If this a WordPress based site, it is likely that WordPress is adding:

 html { margin-top: 32px !important; }

It is doing this in order to make space for the admin bar, which, apparently, for some reason isn't showing up.

To resolve this, add the following to your theme's functions.php file:

add_filter('show_admin_bar', '__return_false');

Upvotes: 2

thirtydot
thirtydot

Reputation: 228182

You probably have an element with margin-top as one of the first children of body.

Read up on collapsing margins.

Purely as a simple test, set padding: 1px on body. If the gap goes away, I'm right.

Upvotes: 80

subseven
subseven

Reputation: 89

try

body {
margin: 0;
padding: 0;
}

Upvotes: -1

Related Questions