Um espaçamento estranho aparece quando eu uso a propriedade margin
Meu HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>LOL</title>
</head>
<body>
<div id="one"></div>
</body>
</html>
CSS:
div {
background: yellow;
width: 77px;
height: 77px;
border: 1px dotted red
}
#one {
margin: 0px 21px 41px 41px
}
Meu valor da margem superior é 0px, no entanto, um espaçamento entre meu quadrado e a parte superior da página é exibida.
Por quê?
Aqui está uma ilustração:
E JSFiddle:http://jsfiddle.net/9vQZ9/1/