[SOLUCIONADO] Problema con divs y margin

BramSt · #1 (**permalink**) 15/12/2015, 15:53

Hola a todos.

Estaba haciendo un ejercicio para clase, que consiste en hacer algo tal que así:

Y la hoja CSS para conseguirlo es la siguiente:

Código CSS:

Ver original#contenedor
{
 
background-color:aqua;
 
width:700px;
 
border:1px solid aqua; 
}
 
#cabecera
{
 
background-color:red;
 
margin:20px;
 
 
}
 
#menu
{
 
background-color:green;
width:150px;
float:left;
margin:20px;
height:250px;
 
}
 
#contenidos
{
 
 
background-color:yellow;
width:470px;
float:left;
height:500px;
margin:20px;
 
 
}
 
#pie
{
 
clear:both;
background-color:violet;
margin:20px;
}

Y el html:

Código HTML:

Ver original<html>
    <head>
        <title>
        </title>
        <link rel="stylesheet" type="text/css" href="Estilos.css"/>
        
    </head>
    <body>
    
        
        <div id="contenedor">
        
            <div id="cabecera">cabecera</div>
            <div id="menu">menu</div>
            <div id="contenidos">contenidos</div>
            <div id="pie">pie</div>
        
        </div>
        
    </body>
</html>

Bueno, el problema es que me ha salido bien casi por suerte, probando a tientas, porque no entiendo por qué he tenido que ponerle un borde al div contenedor para que se muestren los margin-top de la cabecera y el margin-bottom del pie de página. Es decir, si no pongo el borde, queda así:

¿Alguien puede explicarme por qué?

Muchas gracias.

pzin · #2 (**permalink**) 16/12/2015, 03:42

No he mirado el código, pero tiene toda la pinta de ser un problema causado por el colapsamiento de CSS.

Léase: http://www.sitepoint.com/web-foundat...apsing-margins En concreto la sección «Collapsing Margins Between Parent and Child Elements» que es tu caso, aunque todo el artículo es de interés, sobre todo para entender el porqué ocurre.

BramSt · #3 (**permalink**) 16/12/2015, 09:12

Cita:

Iniciado por pzin

No he mirado el código, pero tiene toda la pinta de ser un problema causado por el colapsamiento de CSS.

Léase: [url]http://www.sitepoint.com/web-foundations/collapsing-margins[/url] En concreto la sección «Collapsing Margins Between Parent and Child Elements» que es tu caso, aunque todo el artículo es de interés, sobre todo para entender el porqué ocurre.

Muchas gracias compañero. Ahora mismo me lo imrpimo y leo tranquilamente.

juanebas07126 · #4 (**permalink**) 19/12/2015, 11:51

Prueba antes de todo resetear los estilos del navegador

*{
margin: 0;
padding: 0;
}

BramSt · #5 (**permalink**) 23/12/2015, 13:48

Efectivamente ya he comprendido (creo) el tema de los alineamientos gracias a ese manual. Muchas gracias por vuestras respuestas :)