margin-top no funciona corrrectamente

IXtremeLT · #1 (**permalink**) 24/08/2011, 17:54

Hola buen día,
Mientras comenzaba un nuevo proyecto, me tope con un problema con la propiedad margin-top que desconózco.
Cuando le asigno 15px de margen superior a un div que está dentro de otro div... en vez de moverse el div interno se mueve el div padre, como si le pusiera los 15px de margen superior al div padre.

A continuación dejo el código fuente con éste problema:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:lang="es" lang="es">
 
    <head>
 
        <title>-Prueba-</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            .botones-ventanas {
                width: 200px;
                height:100px;
                background-color: #333;
            }
            .botones-ventanas .boton {
                width: 170px;
                height: 26px;
                background-color: #ccc;
                color: #000;
                /* Muevo .boton 15px de margen superior */
                margin-top: 15px;
            }
        </style>
 
    </head>
 
    <body>
 
        <div class="botones-ventanas">
            <!-- Debería de moverse .boton hacia abajo no .botones-ventanas ¿Qué sucede? -->
            <div class="boton"></div>
        </div>
 
    </body>
 
</html>

Ejecutenlo para que vean a que me refiero.
Espero y puedan ayudarme, saludos y gracias.

------EDITO------
Tambien sucéde lo mísmo con margin-bottom.

cristian_cena · #2 (**permalink**) 24/08/2011, 21:33

tu problema se conoce como "margenes cerrados" añade overflow:hidden; al contenedor. En este enlacese ve en detalle. Saludos

ArturoGallegos · #3 (**permalink**) 24/08/2011, 21:36

es un clásico ese problema... en lugar de asignar un margen al elemento hijo inmediato asigna padding al padre, es decir:

Código CSS:

Ver original.botones-ventanas {
                width: 200px;
                height:100px;
                background-color: #333;
padding:15px 0;
            }
            .botones-ventanas .boton {
                width: 170px;
                height: 26px;
                background-color: #ccc;
                color: #000;
            }

dejo el padding top y bottom porque mencionaste te ocurre lo mismo... no se si exista alguna otra forma de solventar el problema pero de momento es lo que se me viene a la mente

IXtremeLT · #4 (**permalink**) 24/08/2011, 23:47

Gracias a los dos, pero definitivamente cristian_cena me soluciono ese problema, grax!, ahora entiendo que overflow:hidden es una de las cosas principales a tomar en cuenta a la hora de trabajar sobre capas y elementos flotantes, gracias y saludos!