CSS: margin-top de los padres cuando se consiguieron ninguna frontera

Question

Como se puede ver en esta imagen , tengo una div naranja en el interior de un verde div sin borde superior. El div naranja tiene un margen superior 30px, pero también está empujando hacia abajo el div verde. Por supuesto, la adición de un borde superior se solucionará el problema, pero necesito el div verde para ser la parte superior sin fronteras. ¿Qué podía 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;
}

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

Gracias

Answer 1

Se podría añadir a overflow:auto .body para evitar el colapso de margen. Ver http://www.w3.org/TR/CSS2/box. html # colapso-márgenes

Answer 2

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

A medida que el contenedor verde no tiene ninguna frontera o de relleno, no hay nada para contener el margen del elemento de naranja. El margen se utiliza entre el elemento superior y el elemento de naranja al igual que si el contenedor verde tendría el margen.

Usar un acolchado en el contenedor verde en lugar de un margen en el elemento de naranja.

Answer 3

Uso padding en lugar de margin:

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

Answer 4

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

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

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

Answer 5

Se puede añadir ya sea padding-top: 30 en la caja verde, utilizar el posicionamiento relativo en el cuadro de color naranja con top: 30px, o flotar el cuadro naranja y utilizar el mismo margin-top: 30px.

Answer 6

leer este documento: modelo de caja - Margen colapso

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

Answer 7

No sabe cómo hacker esto suena, pero ¿qué hay de la adición de un borde transparente?