Menu
could someone answer me, WHY when I set a margin-top to my <div id="logo">, all the others divs are pushed down. And why if a set float:left to my <div id="logo">, everything works fine.
Code:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Olá Mundo!</title>
<style>
/* CSS RESET HERE */ ( http://html5doctor.com/html-5-reset-stylesheet/ )
body { margin:0; }
#container { width:1000px; min-height:100%; height:auto; margin:0 auto; }
#header { width:100%; height:160px; background-color:#FF0; }
#logo { width:150px; height:150px; margin:10px 0 0 10px; background-color:#F0F; }
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
<h1>Minha logo!</h1>
<h2>meu slogan ...</h2>
</div>
</div>
</body>
</html>
989
It's caused by margin collapse.
Normal Document Flow
In the case where <div id="logo"> is not floated, its top margin is actually sticking out of the top of its containing element, which pushes everything down. The reason for this behavior (as the article above points out) is so that if you have a series of paragraphs with the following CSS:
p {
margin: 1em 0;
}
They will only have 1em of margin between them, instead of 2em (which would be the result if margins didn't collapse).
Float Fix
When you float <div id="logo"> it takes it out of the normal document flow, which means its top margin no longer collapses with its parent's margin.
Fixes
Other options to fix margin collapse in your case would be to add 1px of top/bottom padding or a border to your <div id="header">.
120
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
