¿Por qué la configuración del margen en un div no afecta la posición del contenido secundario?

Question

Me gustaría entender un poco más claramente cómo funcionan los márgenes CSS con divs y contenido infantil.

Si intento esto ...

<div style="clear: both; margin-top: 2em;"> 
    <input type="submit" value="Save" /> 
</div> 

... en el botón Guardar es justo contra el rol de usuario (margen fallar):

---

Margin Fail :(http://img697.imageshack.us/img697/8459/nomargin.jpg

---

Si lo cambio a este ...

<div style="clear: both;"> 
    <input style="margin-top: 2em;" type="submit" value="Save" /> 
</div> 

... hay una brecha entre el botón Guardar y el rol de usuario (victoria por margen):

---

Margin Win :) http://img20.imageshack.us/img20/1973/yesmargin.jpg

---

Preguntas:

Puede alguien explicar ¿Qué estoy observando? ¿Por qué no poner un margen en div causa que el input se mueva hacia abajo? ¿Por qué debo poner el margen en el input mismo? Debe haber alguna ley fundamental de CSS que no estoy comprendiendo.

Answer 1

Esto sería porque el div no tiene un elemento para "alejarse de". Parece que el select que viene antes del div está flotando. Esto hace que se elimine del flujo de página normal y ya no sirve como referencia para los cálculos de margen. El div está limpiando el flotador, es decir, cae debajo de él, luego prueba si hay un margen de 2em para el próximo elemento encima del mismo que está dentro del mismo "flujo". Aparentemente existe, por lo que no baja más.

Establecer el margen en el submit por otro lado es muy claro, ya que el marco de referencia para él es el padre div.

Answer 2

Poner un margen en un elemento solo afecta al margen de ese elemento. ¿Estás esperando que sea heredado o algo así? No lo es Tal vez estás pensando en padding? Proveedores:

<div style="clear: both; padding-top: 2em;"> 
    <input type="submit" value="Save" /> 
</div> 

Ver Box Model:

Otra cosa a tener en cuenta sobre los márgenes es que se fusionan. Por lo tanto:

<div>one</div> 
<div>two</div> 

con:

div { margin: 1em; } 

únicamente dará lugar a una brecha entre ellos no 1 em 2em. Ver 8.3.1 Collapsing Margins:

márgenes verticales pueden colapsar entre ciertas cajas:

• Dos o más márgenes verticales adyacentes de block cajas en el colapso normal flow. El ancho de margen resultante es el máximo de los anchos de margen adyacentes. En el caso de márgenes negativos, el máximo de los valores absolutos de los márgenes adyacentes contiguos se deduce del máximo de los márgenes positivos contiguos .Si no hay márgenes positivos , el máximo absoluto de los márgenes contiguos negativos se deduce de cero. Nota. Las casillas contiguas pueden ser generadas por elementos que no están relacionados como hermanos o antepasados.

Así que una posible explicación de lo que se está viendo es que el elemento que precede a su div ya tiene un margen (en la parte inferior), por lo que no está siendo empujado hacia abajo por la adición de un margen a su div .

Básicamente coloque los bordes alrededor de las cosas y debería ver lo que está sucediendo.

Answer 3

Lo que está sucediendo en el primer ejemplo es que los elementos flotantes sobre el botón flotan fuera de su elemento principal.

El margen funciona correctamente, pero no está entre los elementos flotantes y el botón, se encuentra entre el elemento principal del elemento flotante y el botón. El elemento padre no tiene elementos no flotantes, por lo que su altura es cero y los elementos flotantes se superponen al margen.

Answer 4

En su primer ejemplo, está estableciendo un margen en el DIV mismo. Piensa en el DIV como un bloque que contiene los elementos anidados. En este caso, el elemento anidado sería el botón. Si hace lo siguiente como lo hizo:

<div style="clear: both; margin-top: 2em;"> 
    <input type="submit" value="Save" /> 
</div> 

No está afectando el estilo de elementos secundarios. Aunque la posición relativa de su botón puede cambiar, su no realmente cambia el estilo del elemento secundario. Ahora haciendo:

<div style="clear: both; margin-top: 2em;"> 
    <input type="submit" value="Save" /> 
</div> 

Ahora está configurando el margen de elementos secundarios. Esto tendrá un resultado diferente. Establecer este margen de elementos hijo no tendrá un efecto en el elemento principal (el DIV).