css - margen - padding

CSS: Margen superior cuando el padre no tiene frontera

Question

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

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

Gracias

Answer 1

Leyó este documento: http://www.w3.org/TR/CSS2/box.html#collapsing-margins : http://www.w3.org/TR/CSS2/box.html#collapsing-margins

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 2

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.

Answer 3

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

Answer 4

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.

Answer 5

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

Answer 6

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 .

Answer 7

Use padding lugar de margin :

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