CSS: Margen superior cuando el padre no tiene frontera

Como puedes ver en esta imagen , tengo un div naranja dentro de un div verde sin borde superior. El div naranja tiene un margen superior de 30px , pero también está presionando el div verde. Por supuesto, agregar un borde superior solucionará el problema, pero necesito que el div verde sea el más alto sin bordes. ¿Qué puedo hacer?

 .body { border: 1px solid black; border-top: none; border-bottom: none; width: 120px; height: 112px; background-color: lightgreen; } .body .container { background-color: orange; height: 50px; width: 50%; margin-top: 30px; } 
 
Top
Box
Bottom

Gracias

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

Lo que experimentas es colapso de margen. 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.

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

Use padding lugar de margin :

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

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

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

#element fue empujado hacia abajo porque su primer elemento hijo tenía un margin-top: 30px . Con este CSS, ahora funciona como se esperaba 🙂 No estoy seguro si funcionará para todos los casos, YMMV.

Puede agregar padding-top: 30 en el recuadro verde, usar posicionamiento relativo en el recuadro naranja con la top: 30px , o flotar el recuadro naranja y usar el mismo margin-top: 30px .

Leyó este documento: Modelo de caja : colapso de margen

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%; } 

No estoy seguro de qué tan hackoso suena, pero ¿qué tal si agregas un borde transparente?

    Intereting Posts