Margen de div interno que afecta al margen de div

Question

Tengo un div interno dentro de un div que contiene.

HTML

<div id="container"> 
    <div id="inner"></div> 
</div> 

CSS

#container { 
    width: 100px; 
    height: 100px; 
    background-color: red; 
} 
#inner { 
    margin: 30px; 
    width: 40px; 
    height: 40px; 
    background-color: black; 
} 

violín

http://jsfiddle.net/8xUTJ/4/

espero esto para hacer una pequeña caja de negro centrado verticalmente y horizontalmente en una caja roja grande. En su lugar, tengo una caja negra pegada en la parte superior de la caja roja, y la caja roja tiene el margen superior.

¿Alguien puede explicar lo que CSS piensa que está haciendo aquí?

Answer 1

Agregar overflow:auto al #container div.

jsFiddle example

O

añadir un borde a la #container div.

Puede leer más sobre este comportamiento de margen colapso en W3C.

Answer 2

método 1

position:absolute para el div interior, por lo que sabelo ser margen de 30px de

http://jsfiddle.net/8xUTJ/5/

---

método 2

display:inline-block para el div interior

http://jsfiddle.net/8xUTJ/7/

---

método 3

border:solid 0 transparent a div exterior

http://jsfiddle.net/8xUTJ/8/

Haga su elección :)

Answer 3

Si bien las soluciones proporcionadas son viables, nadie explica el problema. Se llama colapso de margen que ocurre en varios escenarios.

Escenario 1: estos elementos solo estarán separados 30px, porque los márgenes colapsan y el más grande prevalece.

<div style="margin-bottom: 20px"></div> 
<div style="margin-top: 30px"></div> 

Escenario 2 - (su escenario) el margen de la caja interna se derrama fuera de la caja exterior.

<div class="outer"> 
    <div style="margin-top: 20px"></div> 
</div> 

La solución es dar a la caja exterior algo de relleno o un borde (como se sugiere por otros). Muchas veces, yo uso el siguiente CSS en la caja exterior para mitigar situaciones como esta:

.outer { 
    margin-top: -1px; 
    border-top: 1px solid transparent; 
} 

Answer 4

cheque esta fiddle

Necesitas float el interior div para que funcione

#inner {  
    margin:30px; 
    float:left; /* give float */ 
    width: 40px; 
    height: 40px; 
    background-color: black; 
}​ 

O bien, otorgue la propiedad overflow:auto al div#container.

cheque esta fiddle

Answer 5

En primer lugar, tiene #containermargin-top:0#inner y tiene margin-top:30px. La relación de estos elementos es la de un padre y un primer hijo.

Si no hay frontera, el relleno, el contenido en línea, o recogida de separar el margen superior de un bloque con el margen superior de su bloque niño primero , o sin borde, el relleno, el contenido en línea, altura, min-height, o max-height para separar el margen inferior de un bloque con el margen inferior de su último hijo, luego esos márgenes colapsan. El margen contraído termina afuera del padre.

medios de margen colapso estos márgenes se combinan en un solo margen cuyo tamaño es el más grande de los márgenes combinados en él

Estas reglas se aplican incluso a los márgenes que son cero, por lo que el margen de un primer/último hijo termina fuera de su padre (de acuerdo con las reglas anteriores ) si es o no el margen de la matriz es cero

es por eso que es d con 30px margen superior aplicada exterior del elemento #container, desde su violín: