Hoy mientras depuraba un problema de maquetación me he encontrado con un problema que me ha dejado inquieto y todavía no encuentro explicación.
Considero que tengo bastantes conocimientos en CSS pero he descubierto un caso concreto (bastante sencillo, por cierto) que no logro explicar de ninguna de las maneras. Mejor lo explicaré con código:
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
html, body { width:100%; height:100%; margin:0 }
#padre { background:blue; height:100% }
#hijo { background:red; width:500px; height:300px }
</style>
</head>
<body>
<div id="padre">
<div id="hijo"></div>
</div>
</body>
</html> Hasta aquí todo bien. Un div que ocupa toda la pantalla (dentro del
body) con un div hijo (dimensionado a 500x300) en su interior. Lo inesperado viene cuando al elemento hijo le damos un margen. Imaginemos:
Pues bien, lo esperado, según los principios del diseño CSS, el div hijo debería centrarse al medio y descender 100 píxeles respecto el límite superior de su elemento padre. ¡Pues no!: En realidad lo que hace es descender el padre, no el hijo.
En un principio he pensado que debía ser algún
bug particular de Firefox 5. Pero no, esto es general; pasa tanto en el explorador de Mozilla como en Chrome, Safari, Opera, IE...