¿Por qué este estilo de margen superior CSS no funciona?

Intento agregar valores de margen en un div dentro de otro div. Todo funciona bien, excepto el valor superior, parece ser ignorado. ¿Pero por qué?

Lo que esperaba:

Lo que consigo:

Código:

#outer {
    	width: 500px; 
    	height: 200px; 
    	background: #FFCCCC;
    	margin: 50px auto 0 auto;
    	display: block;
}
#inner {
    	background: #FFCC33;
    	margin: 50px 50px 50px 50px;
    	padding: 10px;
    	display: block;
}

<div id="outer">
  <div id="inner">
  	Hello world!
  </div>
</div>

W3Schools no tiene explicación de por qué el margen se comporta de esta manera.

En realidad, está viendo que el margen superior del #innerelemento colapsa en el borde superior del #outerelemento, dejando solo el #outermargen intacto (aunque no se muestra en sus imágenes). Los bordes superiores de ambas cajas están alineados entre sí porque sus márgenes son iguales.

Estos son los puntos relevantes de la especificación W3C:

8.3.1 Colapso de márgenes

En CSS, los márgenes adyacentes de dos o más cuadros (que pueden ser o no hermanos) pueden combinarse para formar un margen único. Se dice que los márgenes que se combinan de esta manera colapsan , y el margen combinado resultante se denomina margen contraído .

Márgenes verticales adyacentes colapso [...]

Dos márgenes son contiguos si y solo si:

• ambos pertenecen a cuadros de nivel de bloque en flujo que participan en el mismo contexto de formato de bloque
• sin cuadros de línea, sin espacio libre, sin relleno y sin borde los separan
• ambos pertenecen a bordes de caja adyacentes verticalmente, es decir, forman uno de los siguientes pares:
  • margen superior de una caja y margen superior de su primer elemento secundario en flujo

Puede realizar cualquiera de las siguientes acciones para evitar que el margen se contraiga:

• Flota cualquiera de tus divelementos
• Haga cualquiera de sus divelementos en línea bloques
• Conjunto overflowde #outeraauto (o cualquier valor distinto de visible)

La razón por la cual las opciones anteriores evitan que el margen se contraiga es porque:

• Los márgenes entre una caja flotante y cualquier otra caja no colapsan (ni siquiera entre una caja flotante y sus elementos secundarios en flujo).
• Los márgenes de elementos que establecen nuevos contextos de formato de bloque (como flotantes y elementos con 'desbordamiento' que no sea 'visible') no colapsan con sus elementos secundarios en flujo.
• Los márgenes de los cuadros de bloque en línea no se contraen (ni siquiera con sus elementos secundarios en flujo).

Los márgenes izquierdo y derecho se comportan como esperaba porque:

Los márgenes horizontales nunca colapsan.

Intenta usar display: inline-block;en el div interno.

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:block;
}
#inner {
    background:#FFCC33;
    margin:50px 50px 50px 50px;
    padding:10px;
    display:inline-block;
}

Lo que @BoltClock mencionó es bastante sólido. Y aquí solo quiero agregar varias soluciones más para este problema. verifique este margen de colapso de w3c . Las partes verdes son el pensamiento potencial de cómo se puede resolver este problema.

Solución 1

Los márgenes entre una caja flotante y cualquier otra caja no colapsan (ni siquiera entre una caja flotante y sus elementos secundarios en flujo).

eso significa que puedo agregar float:lefta cualquiera #outero #inner demo1 .

También tenga en cuenta que floatinvalidaría el automargen.

Solución 2

Los márgenes de elementos que establecen nuevos contextos de formato de bloque (como flotantes y elementos con 'desbordamiento' que no sea 'visible') no colapsan con sus elementos secundarios en flujo.

aparte de visible, pongamos overflow: hiddenen #outer. Y de esta manera parece bastante simple y decente. Me gusta.

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    overflow: hidden;
}
#inner {
    background: #FFCC33;
    height: 50px;
    margin: 50px;
}

Solución 3

Los márgenes de las cajas posicionadas absolutamente no colapsan (ni siquiera con sus hijos en flujo).

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    position: absolute; 
}
#inner{
    background: #FFCC33;
    height: 50px;
    margin: 50px;
}

o

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    position: relative; 
}
#inner {
    background: #FFCC33;
    height: 50px;
    margin: 50px;
    position: absolute;
}

estos dos métodos romperán el flujo normal de div

Solución 4

Los márgenes de los cuadros de bloque en línea no se contraen (ni siquiera con sus elementos secundarios en flujo).

es lo mismo que @enderskill

Solución 5

El margen inferior de un elemento de nivel de bloque en flujo siempre colapsa con el margen superior de su próximo hermano de nivel de bloque en flujo, a menos que ese hermano tenga espacio libre.

Esto no tiene mucho trabajo que ver con la pregunta, ya que es el margen de colapso entre hermanos. generalmente significa si una caja superior tiene margin-bottom: 30pxy una caja hermana tiene margin-top: 10px. El margen total entre ellos es en 30pxlugar de 40px.

Solución 6

El margen superior de un elemento de bloque en flujo se contrae con el primer margen superior del niño a nivel de bloque en flujo si el elemento no tiene borde superior, sin relleno superior y el niño no tiene espacio libre.

Esto es muy interesante y solo puedo agregar una línea de borde superior

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    border-top: 1px solid red;

}
#inner {
    background: #FFCC33;
    height: 50px;
    margin: 50px;

}

Y también <div>está en el nivel de bloque predeterminado, por lo que no tiene que declararlo a propósito. Perdón por no poder publicar más de 2 enlaces e imágenes debido a mi reputación de novato. Al menos sabes de dónde viene el problema la próxima vez que veas algo similar.

No estoy seguro de por qué lo que tienes no funciona, pero puedes agregar

overflow: auto;

a la div exterior.

Si agrega algún relleno #outer, funciona.

Manifestación

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:block;
    padding-top:1px;
}

No estoy seguro de por qué, pero cambiando el CSS interno a

display:inline-block;

parece funcionar;

No responde el "por qué" (tiene que ser algo con un margen de colapso), pero parece que la forma más fácil / lógica de hacer lo que está tratando de hacer sería agregar padding-topal div externo :

http://jsfiddle.net/hpU5d/1/

Nota menor: no debería ser necesario establecer un div a display:block;menos que haya algo más en su código que le indique que no se bloquee.

prueba esto:

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:table;
}
#inner {
    background:#FFCC33;
    margin:50px 50px 50px 50px;
    padding:10px;
    display:block;
}​

http://jsfiddle.net/7AXTf/

Buena suerte

Supongo que establecer la propiedad de posición del #inner div en relativo también puede ayudar a lograr el efecto. Pero de todos modos probé el código original pegado en la Pregunta en IE9 y la última versión de Google Chrome y ya dan el efecto deseable sin ninguna modificación.

Uso padding-top:50pxpara div externo. Algo como esto:

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:table;}

Nota: el relleno aumentará el tamaño de tu div. En este caso, si el tamaño de su div es importante, quiero decir si debe tener una altura específica. disminuir la altura en 50 px .:

#outer {
    width:500px; 
    height:150px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:table;}

¿Has intentado! Importante antes de todo, forzará todo:

margin:50px 50px 50px 50px !important;

Solo para una solución rápida, intente envolver los elementos secundarios en un divelemento como este:

<div id="outer">
   <div class="divadjust" style="padding-top: 1px">
      <div id="inner">
         Hello world!
      </div>
   </div>
</div>

El margen de innerdiv no colapsará debido al relleno de 1pxintermedios outery innerdiv. Entonces, lógicamente, tendrá 1pxespacio adicional junto con el margen existente de innerdiv.