Bueno, no es la primera vez que me encuentro con que al poner margin a un elemento que está al borde de otro que no tiene padding, el margen del primero transpasa al segundo :S
Como es que esto funciona? Verdaderamente no le veo la mas mínima lógica :S.
Ejemplo:
Código PHP:
<html>
<head>
<title>WTF?!</title>
</head>
<body>
<div id="parent" style="background-color:#444;">
<div id="hijo" style="background-color:#888;margin-bottom:10px;">
Hola.
</div>
</div>
<div id="otrodiv" style="background-color:#999;">Chau.</div>
</body>
</html>
Al hacer eso, queda un espacio en blanco entre el div "parent" y el "otrodiv", y debería quedar 10 píxeles en #444 del div "parent", o al menos eso sería lo mas lógico :S
Tonces, porque pasa esto? -.-
PD: Si le agregas 1px de padding al div "parent", se "corrije", pero te queda 1 px de padding -.-
EDITO: Ya lo solucióné (Mas que solucionarlo, lo entendí xD). Acá una explicación lógica (mas bien, estandar -.-) de porque pasa esto
http://www.researchkitchen.de/blog/a...collapsing.php (En inglés)