Foros del Web - Ver Mensaje Individual - 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.