Un problema simple y rápido con márgenes de CSS

Question

Siempre pensé que la teoría subyacente detrás de los márgenes de CSS era muy simple. Un div con un margen de 10px creará un amortiguador de 10px alrededor de ese elemento. Cuando dos divs se colocan uno al lado del otro, ambos con un margen de 10px, resulta que los divs están separados 20px; ambos elementos tienen un margen de 10 píxeles, lo que da como resultado una distancia de 20 píxeles entre los elementos. Esto parece ser correcto, y es lo que siempre he creído como un hecho.

SIN EMBARGO, he descubierto recientemente que si en lugar de los dos divs están uno al lado del otro y colocan uno debajo del otro, el margen entre los dos elementos ahora es solo 10px. ¿Qué pasó con el margen de 10px emitido por el otro div? ¿Por qué no hay coherencia una al lado de la otra y verticalmente apilada?

Un margen dice esencialmente "no coloque nada dentro de x píxeles de mí". Por "cualquier cosa", ¿esto incluye los márgenes de otros elementos? En el caso de una al lado de la otra, la respuesta parece ser sí, el margen dice "no coloque nada, incluido su propio margen, dentro de x píxeles de mí". En el caso de verticalmente, parece permitir esto último?

favor, alguien puede aclarar por lo que puede ponerlo a la cama y continuar con mi noche :)

Answer 1

Tiene que ver con cuando están inline o inline-block Cambia su propiedad para que se apilan uno junto al otro sin colapsar los márgenes juntos (lo cual es normal, pero el comportamiento no es intuitivo).

http://jsfiddle.net/xeCZJ/3/

márgenes colapso cuando están en la display:block propiedad predeterminada. Puede usar inline-block para que se comporten como espera, pero debe controlar manualmente los saltos de línea con br o con el ancho del elemento contenedor.

O puede utilizar relleno en lugar de márgenes.

Answer 2

Parece que display:inline ignora todos los márgenes superiores e inferiores, display:block permite que los márgenes colapsen y display:inline-block los agrega juntos por un margen enorme. Su cesta esta jsFiddle por ejemplo: http://jsfiddle.net/Z2nUN/4/

<p>Some content</p> 
<p>some more content</p> 
<p class="wideMargin">some more extra content</p> 
<p class="narrowMargin">less extra content</p> 
<p>Some content</p> 
<p>some more content</p> 
<p class="wideMargin">some more extra content</p> 
<p class="narrowMargin">less extra content</p> 

<hr /> 
<div class="allBlock"> 
<p>Some content</p> 
<p>some more content</p> 
<p class="wideMargin">some more extra content</p> 
<p class="narrowMargin">less extra content</p> 
</div> 

<hr /> 
<div class="allInlineBlock"> 
<p>Some content</p> 
<p>some more content</p> 
<p class="wideMargin">some more extra content</p> 
<p class="narrowMargin">less extra content</p> 
<p>Some content</p> 
<p>some more content</p> 
<p class="wideMargin">some more extra content</p> 
<p class="narrowMargin">less extra content</p> 
</div>​ 


p{ margin:10px; background:#ccc; display:inline;} 
.wideMargin{ margin:30px;} 
.narrowMargin{ 0px; } 
.allBlock p{ display:block;} 
.allInlineBlock p{ display:inline-block;}​ 

nunca se dio cuenta de eso. Hoy lo aprendí, supongo.

EDIT: Añadido display: block y inline-block

Answer 3

Parece que has encontrado la respuesta por ti mismo: el colapso de los márgenes son parte de la CSS2.1 recommendation y CSS3 working draft. Este último depende de block-progression, que es 'tb' (arriba -> abajo) de manera predeterminada. Esto dará como resultado el colapso de los márgenes superior e inferior. Con el fin de colapsar derecho-márgenes izquierdas /, habría que utilizar block-progression:lr o block-progression:rl:

• El margen izquierdo de una caja Una colapsa con el margen izquierdo de la caja B de los padres si los márgenes son adyacentes y B es 'rl' o 'lr'.
• El margen derecho de un recuadro A se contrae con el margen derecho de su recuadro principal B si los márgenes son contiguos y B es 'rl' o 'lr'.

Desafortunadamente block-progression no está en el newest working draft y es muy poco probable que sea implementada por cualquier navegador. El módulo de caja CSS3 no se ha actualizado desde 2007, por lo que no está claro cuándo obtendrá una respuesta definitiva.