CODEWITHSUNDEEP
htmlcss
Mr Lister
Mr Lister

Reputation: 46539

Unexpected scrollbar

How come there is a vertical scrollbar visible with this HTML file?

<!DOCTYPE html>
<html>
 <head>
  <title>Test</title>
  <style>
   html, body {border:0; margin:0; padding:0; height:100%}
   h1 {margin:1em}
  </style>
 </head>
 <body>
  <h1>Test</h1>
 </body>
</html>

(or this jsFiddle)

The body has exactly the same height as the window, obviously. So, what makes the content larger? What am I missing?
(Tested with IE, FF, Chrome.)

Upvotes: 3

Views: 1157

Answers (5)

Bazzz
Bazzz

Reputation: 26937

This behaviour is called "collapsing margins". Since your h1 element is the first child element of body, it tries to collapse margin with it and the margin of h1 ends up at the body tag. Since body is already 100% the added margin will make it larger than the viewport.

Read more on collapsing margins on w3c

Upvotes: 3

kinakuta
kinakuta

Reputation: 9037

The margin on your h1 element is expanding the content of your body which is already 100% of the height. Exceeding 100% of the height is causing the scroll.

Upvotes: 2

alex
alex

Reputation: 490143

Your h1 element's top margin is being calculated from the top of the document.

You could use padding in this example instead.

Upvotes: 1

mkk
mkk

Reputation: 7693

remove height: 100% or add overflow: hidden. But be careful - 100% means only 100% of your initial screen.

Upvotes: 1

SNAG
SNAG

Reputation: 2113

use this:

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

Upvotes: 1

Related Questions