Podríamos resumir la idea de combinación de márgenes de la siguiente forma:

“En caso de que dos o más vértices verticales se encuentren la altura del margen será igual a la altura del mayor de los márgenes combinados”.

Sobre esta idea, los márgenes son un detalle del diseño que nos pueden volver locos si no tenemos en cuenta esta premisa. Veamos algunos ejemplos.

Por ejemplo aquí, tenemos dos elementos situados uno encima del otro. Podemos observar como se combinan sus márgenes. De modo que en la parte de “antes” tenemos como se dispondría el diseño de no combinarse los márgenes, y en la sección “después” podemos ver cuál es la disposición real de los márgenes.

Y otro caso aún más habitual, el caso en el que un elemento se encuentra dentro de otro.

Si no hay relleno o borde que separe los márgenes, éstos se combinarán. Es decir uno de los márgenes (el mayor) permanecerá, mientras que el otro desaparecerá.

También puede combinarse los márgenes superior e inferior de un elemento vacío. Si no hay bordes ni rellenos ni contenido el margen inferior toca el superior y se combinan.