Você encontrará muitos problemas estranhos ao criar páginas CSS. Esses problemas podem ser causados por bugs do navegador ou compreensão insuficiente das propriedades CSS. Este artigo discute a questão da sobreposição de margem CSS. A fusão de margens significa que quando duas margens verticais se encontram, elas formam uma única margem. A altura da margem mesclada é igual à maior das alturas das duas margens mescladas. A fusão de margens (sobreposição) é um conceito bastante simples. No entanto, quando se trata de layout de páginas da web na prática, isso pode causar muita confusão. Quando um elemento está contido dentro de outro elemento (assumindo que não há preenchimento ou borda separando as margens), suas margens superior e/ou inferior também são mescladas. Por favor, olhe a imagem abaixo: Embora possa parecer estranho, as margens podem até fundir-se entre si. Suponha que você tenha um elemento vazio com margens, mas sem borda ou preenchimento. Neste caso, a margem superior e a margem inferior se chocam e se fundem: Se esta margem encontrar a margem de outro elemento, ela também será mesclada: É por isso que uma série de elementos de parágrafo ocupa muito pouco espaço porque todas as suas margens são mescladas para formar uma pequena margem. A fusão de margens pode parecer um pouco estranha no início, mas na prática faz sentido. Tomemos, por exemplo, uma página de texto típica composta por vários parágrafos. O espaço acima do primeiro parágrafo é igual à margem superior do parágrafo. Sem mesclagem de margens, as margens entre todos os parágrafos subsequentes serão a soma das margens superior e inferior adjacentes. Isso significa que o espaço entre os parágrafos é duas vezes maior que o topo da página. Se ocorrer a mesclagem das margens, as margens superior e inferior entre os parágrafos serão mescladas, de modo que as distâncias em todos os lugares sejam consistentes. A mesclagem de margens ocorre apenas para margens verticais de caixas de bloco no fluxo normal de documentos. As margens entre caixas embutidas, caixas flutuantes ou caixas posicionadas de forma absoluta não são mescladas.
Quando um elemento aparece acima de outro elemento, a borda externa inferior do primeiro elemento
