CSS: Margen superior cuando el elemento primario no tiene borde

Como puede ver en this picture, tengo una naranja div dentro de una verde div sin borde superior. La naranja div tiene un margen superior de 30px, pero también está presionando el verde div hacia abajo. Por supuesto, agregar un borde superior solucionará el problema, pero necesito el verde div para estar en la parte superior sin bordes. ¿Qué puedo hacer?CSS: Margen superior cuando el elemento primario no tiene borde

.body { 
 
\t border: 1px solid black; 
 
\t border-top: none; 
 
\t border-bottom: none; 
 
\t width: 120px; 
 
\t height: 112px; 
 
\t background-color: lightgreen; 
 
} 
 

 
.body .container { 
 
\t background-color: orange; 
 
\t height: 50px; 
 
\t width: 50%; 
 
\t margin-top: 30px; 
 
}

<div class="header">Top</div> 
 
<div class="body"> 
 
\t <div class="container">Box</div> 
 
</div> 
 
<div class="foot">Bottom</div>

Gracias

Fuente

2009-09-08 Manny

¿Puede explicar el efecto deseado? ¿Desea que el texto dentro del contenedor naranja aparezca 30 píxeles desde la parte superior o desea que la parte superior del contenedor naranja aparezca 30 píxeles debajo de la parte superior del contenedor verde? – Mayo

Pregunta relacionada: http://stackoverflow.com/questions/315738/unexpected-margin-with-very-simple-html – mercator

Puede ser más apropiado para http://doctype.com/ – Nobody

Puede agregar overflow:auto a .body para evitar el colapso de márgenes. Ver http://www.w3.org/TR/CSS2/box.html#collapsing-margins

Fuente

2009-09-08 15:57:11 Fabian

woot, ¡simplemente me salvó de volverme loco con mi margen de desaparición! –

Tuve el mismo problema, me estaba volviendo loco ya que no quería tener un borde, esto solucionó mi problema, gracias por la información, y el enlace ayuda a explicar por qué sucede esto. – jimplode

El colapso del margen parece ser algo extraño por defecto, ¿alguien tiene un buen ejemplo de cuándo querría usarlo? – opsb

Uso padding en lugar de margin:

.body .container { 
    ... 
    padding-top: 30px; 
}

Fuente

2009-09-08 15:45:55

Usted puede agregar padding-top: 30 en la caja verde, utilizar el posicionamiento relativo en el cuadro de color naranja con top: 30px , o flotar la caja naranja y use el mismo margin-top: 30px.

Fuente

2009-09-08 15:50:03

de leer este documento: Box model - Margin collapsing

CSS

.body { 
    border: 1px solid black; 
    border-bottom: none; 
    border-top: none; 
    width: 120px; 
    height: 112px; 
    background-color: lightgreen; 
    padding-top: 30px; 
} 

.body .container { 
    background-color: orange; 
    height: 50px; 
    width: 50%; 
}

Fuente

2009-09-08 15:52:18 ranonE

Lo que experimentas es el margen colapso. El margen no especifica un área alrededor de un elemento, sino la distancia mínima entre los elementos.

Como el contenedor verde no tiene ningún borde o relleno, no hay nada que contenga el margen del elemento naranja. El margen se usa entre el elemento superior y el elemento naranja como si el contenedor verde tuviera el margen.

Utilice un relleno en el contenedor verde en lugar de un margen en el elemento naranja.

Fuente

2009-09-08 15:56:53 Guffa

No estoy seguro de qué tan hackoso suena, pero ¿qué le parece agregar un borde transparente?

Fuente

2010-02-20 01:07:53 finferflu

No estoy seguro si esto va a funcionar en su caso, pero me acabo de resolver esto con las siguientes propiedades CSS

#element { 
    padding-top: 1px; 
    margin-top: -1px; 
}

#element estaba siendo empujado hacia abajo porque es primer elemento de niño tenía una margin-top: 30px. Con este CSS, ahora funciona como se esperaba :) No estoy seguro si funcionará para todos los casos, YMMV.

Fuente

2010-05-10 01:06:26 alex

CSS: Margen superior cuando el elemento primario no tiene borde

Respuesta

Cuestiones relacionadas