Vous rencontrerez de nombreux problèmes étranges lors de la mise en page de pages Web CSS. Ces problèmes peuvent être causés par des bugs du navigateur ou par une compréhension insuffisante des propriétés CSS. Cet article aborde la question de la superposition des marges CSS. La fusion des marges signifie que lorsque deux marges verticales se rencontrent, elles forment une seule marge. La hauteur de la marge fusionnée est égale à la plus grande des hauteurs des deux marges fusionnées. La fusion (chevauchement) des marges est un concept assez simple. Cependant, lorsqu’il s’agit de mettre en page des pages Web dans la pratique, cela peut créer beaucoup de confusion. Lorsqu'un élément est contenu dans un autre élément (en supposant qu'il n'y ait pas de remplissage ou de bordure séparant les marges), leurs marges supérieure et/ou inférieure sont également fusionnées. Veuillez regarder l'image ci-dessous : Même si cela peut paraître étrange, les marges peuvent même fusionner avec elles-mêmes. Supposons que vous ayez un élément vide comportant des marges mais sans bordure ni remplissage. Dans ce cas, la marge supérieure et la marge inférieure se heurtent et fusionnent : Si cette marge rencontre la marge d'un autre élément, elle sera également fusionnée : C'est pourquoi une série d'éléments de paragraphe prend très peu de place, car toutes leurs marges sont fusionnées pour former une petite marge. La fusion des marges peut sembler un peu étrange au début, mais en pratique, cela a du sens. Prenons, par exemple, une page de texte typique composée de plusieurs paragraphes. L'espace au-dessus du premier paragraphe est égal à la marge supérieure du paragraphe. Sans fusion des marges, les marges entre tous les paragraphes suivants seront la somme des marges supérieure et inférieure adjacentes. Cela signifie que l'espace entre les paragraphes est deux fois plus grand que le haut de la page. En cas de fusion des marges, les marges supérieure et inférieure entre les paragraphes sont fusionnées, de sorte que les distances soient cohérentes partout. La fusion des marges ne se produit que pour les marges verticales des zones de bloc dans le flux de documents normal. Les marges entre les cases en ligne, les cases flottantes ou les cases en position absolue ne sont pas fusionnées.
Lorsqu'un élément apparaît au-dessus d'un autre élément, le bord extérieur inférieur du premier élément
