Mysterious padding between <body> and first <div> that disappears when a border is added to the <div>
See this fiddle http://jsfiddle.net/a506r2gh/
There is a strange addition that appears between the body and the header section. And it goes away if I add a border to the title div. Margin collapse and body edge don't seem to be an issue here.
Thanks in advance!
Here is the html
<body>
<div class="header">
<a href="#"><div class="photo"></div></a>
<div class="footer"></div>
</div>
</body>
Here is the css
body {
margin:0; padding:0; background: #999;
}
.header {
background-color: #422;
/* border: solid 1px red; */ /* problem goes away if I add border to header */
}
.header .photo {
width: 150px;
height: 150px;
border-radius: 75px;
background: #660;
margin:50px auto;
}
.footer {
height:50px;
background: #303;
margin-bottom:50px;
}
source to share
The element .photo
inside your header has a 50px top and bottom margin, which affects the parent.
To prevent this, add overflow: auto
to .header
.
There are also several other ways you can work out.
I can't say why this is happening, but here is a quote from MDN on behavior:
If there is no border, padding, inline content, height, or minimum height to separate the marker edge from its edge, then its top and bottom margins are reset.
source to share