Menu
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.)
883
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
78
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.
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
