¿Por qué 10px + 10px = 10px?

Question

Tengo el siguiente script donde el margen para. clase portlet se comporta de forma extraña:

http://jsfiddle.net/mYx5y/19/

cabe agregando 10px alrededor de cada módulo de función, lo que debería significar una brecha de 20 píxeles entre portlets. Por alguna razón, solo obtengo 20px si un portlet tiene un widget a la derecha o a la izquierda de él mismo, pero solo 10px si el portlet tiene otro portlet por encima o por debajo.

¿Por qué estoy obteniendo 10px verticalmente?

Answer 1

Como los márgenes no se suman, colapsan. Si tiene dos elementos A y B, un margen A = 10px y un margen B = 15px, el espacio entre A y B será 15px.

dos soluciones:

1. Uso margin-bottom: 20 píxeles, el margen-top: 0px
2. los envuelven en un contenedor y aplicar padding: 10px 0;

Answer 2

Como los márgenes colapsan, no se agregan, solo max() -ed (se usará el mayor valor de margen de los objetos vecinos). Use relleno si el espacio es parte de su elemento.

Answer 3

Así es como funcionan los márgenes. Los márgenes verticales adyacentes colapsan uno en el otro:

Dos o más márgenes verticales contiguos de cuadros de nivel de bloque en el colapso de flujo normal. El ancho del margen resultante es el máximo de los anchos de margen adyacentes. En el caso de los márgenes negativos, el máximo de los valores absolutos de los márgenes contiguos negativos se deduce del máximo de los márgenes adyacentes positivos. Si no hay márgenes positivos, el máximo absoluto de los márgenes adyacentes negativos se deduce de cero. Nota. Los cuadros adyacentes pueden ser generados por elementos que no están relacionados como hermanos o antepasados.

Consulte también: Collapsing margins