Why does an html with a single p bring up a scrollbar when body.height=100%

Question

This html causes a vertical scroll to apear:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style>
        body, html {
            height:100%;
            margin:0;
            padding:0;
        }        
    </style>
</head>
<body>
    <p>some text</p>    
</body>
</html>

codepen: http://codepen.io/anon/pen/mykna

For my reasoning, the single p element does not cause the body to become larger than it is already by the 100% height setting. The truth however is, that the size of the p enlarges the body, its size is added. Why?

I tested this in current Chrome, FF, IE, all are (luckily) the same and bring up a vertical scrollbar, also Codepen shows the scrollbar.

edit

Removing height and setting min-height:100% and max-height:100% causes the behavior I expected, no scrollbar comes up. Which also makes me think, because min=max=100% should be the same as height=100%, in my simple mind.

Anonymous Anonymous · Accepted Answer · 2014-10-14T09:07:19

It's because margin collapsing and you could add display:inline-block; to p like this:

DEMO

p {
    display:inline-block;
}

To explain the margin collapsing behaviour, I've created a demo, in that demo the p tag has 50px margin top and bottom and the body has outline. As you can see the p tag margin collapsed and applied to the body and this forces the body to start from 50px below.

JSFiddle - DEMO

body, html {
    height:100%;
    margin:0;
    padding:0;
}
body {
    outline: solid;
    outline-color: #F00;
    outline-width: 5px;
}
p {
    margin: 50px 0px; 
    background-color: #ADFF2F;
}

<p>My Text</p>

Why does an html with a single p bring up a scrollbar when body.height=100%

2 Answers