Foros del Web » Creando para Internet » CSS »

Problema margin-top

Estas en el tema de Problema margin-top en el foro de CSS en Foros del Web. Hola Tengo el siguiente código html <div id="divTodo"> <div id="divHeader"></div> </div> y su css asociado es: body { padding: 0; margin: 0; background: url('./img/degradado.png') repeat-x; ...
  #1 (permalink)  
Antiguo 26/04/2011, 08:49
 
Fecha de Ingreso: enero-2011
Mensajes: 35
Antigüedad: 13 años, 3 meses
Puntos: 0
Problema margin-top

Hola

Tengo el siguiente código html

<div id="divTodo">
<div id="divHeader"></div>
</div>


y su css asociado es:
body {
padding: 0;
margin: 0;
background: url('./img/degradado.png') repeat-x;
}
#divTodo{
width: 900px;
height: 700px;
background-color: #FFF;
margin: 0 auto 0 auto;
}
#divHeader{
margin-top: 15px;
width: 900px;
height: 100px;
background-color: #000;
}

El problema es que el margin-top no me funciona, como yo esperaba, es decir según el código y su hoja de estilo tendría que tener una pagina con el fondo con mi degradado y centrado un div que ocupa 900x700 en blanco y dentro de ese div a 15px de distancia un div de 100px de alto con fondo negro.

Pues no me lo hace, los 15px estos de margin-top, no se ven en blanco sino con el color del degradado.

Si hago padding-top: 15px; en el divTodo y quito el margin-top si me lo hace, tambien leyendo el foro si pongo un padding-top: 1px; en divTodo y dejo el margin-top en divHeader me funciona, alguien sabe porque pasa esto y como puedo solucionarlo?

Lo quiero hacer con un margin-top en el divHeader, porque si lo hago con el padding en el divTodo, tengo que restarle ese padding al height.

Muchas gracias por adelantado
  #2 (permalink)  
Antiguo 26/04/2011, 09:20
 
Fecha de Ingreso: abril-2011
Mensajes: 47
Antigüedad: 13 años
Puntos: 13
Respuesta: Problema margin-top

ponga "float:left" en el #divHeader
  #3 (permalink)  
Antiguo 26/04/2011, 09:35
 
Fecha de Ingreso: enero-2011
Mensajes: 35
Antigüedad: 13 años, 3 meses
Puntos: 0
Respuesta: Problema margin-top

Funciona, muchas gracias.

Me podrías decir el porque pasa esto? Alguna explicación para que lo comprenda

Gracias
  #4 (permalink)  
Antiguo 26/04/2011, 13:17
 
Fecha de Ingreso: abril-2011
Mensajes: 47
Antigüedad: 13 años
Puntos: 13
Respuesta: Problema margin-top

Este problema se llama "margin collapsing"

El margen colapso sólo ocurre con los márgenes superior e inferior. Él ocurre cuando dos o más superior o inferior márgenes se están tocando. La idea básica es que cuando tocan, el más grande se utiliza, y el otro es ignorado. El margen aparece siempre tan lejos como sea posible, fuera el elemento más externo cuyo margen está participando en el colapso.
  #5 (permalink)  
Antiguo 23/05/2011, 08:32
 
Fecha de Ingreso: enero-2011
Mensajes: 35
Antigüedad: 13 años, 3 meses
Puntos: 0
Respuesta: Problema margin-top

Muchas gracias por la información, siempre se aprende algo nuevo.

Etiquetas: margin-top
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:33.