¿Porque el margin transpasa al elemento contenedor? :S

ZequeZ · #1 (**permalink**) 29/12/2009, 01:34

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)

jomaruro · #2 (**permalink**) 29/12/2009, 16:08

Hola:

Muy bien, además de plantear una duda cuando encuentras la solución la compartes.

Saludos.

ZequeZ · #3 (**permalink**) 31/12/2009, 00:28

Cita:

Iniciado por jomaruro

Hola:

Muy bien, además de plantear una duda cuando encuentras la solución la compartes.

Saludos.

La solución, como indica en el link que dejé, sería agregarle un padding de 1px al elemento padre (En el ejemplo sería el div "parent"). Y si necesitas un diseño muy exacto le bajas 1px al elemento hijo y listo xD.