Modèle de boîte : fusion des marges CSS
- Page précédente Marge externe CSS
- Page suivante Vue d'ensemble de la position CSS
La fusion des marges extérieures signifie que lorsque deux marges extérieures verticales se rencontrent, elles forment une marge.
La hauteur de la marge fusionnée est égale à la plus grande des deux marges qui se fusionnent.
Fusion des marges extérieures
La fusion des marges extérieures (superposition) est un concept assez simple. Cependant, dans la pratique de la mise en page des pages web, elle peut causer beaucoup de confusion.
En termes simples, la fusion des marges extérieures signifie que lorsque deux marges extérieures verticales se rencontrent, elles forment une marge. La hauteur de la marge fusionnée est égale à la plus grande des deux marges qui se fusionnent.
Lorsqu'un élément apparaît au-dessus d'un autre élément, la marge extérieure inférieure du premier élément et la marge extérieure supérieure du deuxième élément se fusionnent. Regardez l'image suivante :
Lorsqu'un élément est contenu dans un autre élément (en supposant qu'il n'y ait pas de marge interne ou de bordure qui sépare les marges extérieures), leurs marges extérieures supérieures et/ou inférieures se fusionnent également. Regardez l'image suivante :
Bien que cela puisse sembler étrange, la marge extérieure peut même se fusionner avec elle-même.
Supposons qu'il y ait un élément vide, qui a une marge extérieure mais pas de bordure ou de remplissage. Dans ce cas, la marge extérieure supérieure et inférieure se touchent et se fusionnent :
Si cette marge rencontre la marge externe d'un autre élément, elle se fusionnera également :
C'est pourquoi une série d'éléments de paragraphe occupe une très petite espace, car toutes leurs marges externes se fusionnent ensemble pour former une petite marge.
La fusion de marge externe peut sembler étrange au premier abord, mais en réalité, elle a du sens. Prenez par exemple une page de texte typique composée de plusieurs paragraphes. L'espace au-dessus du premier paragraphe est égal à la marge externe supérieure du paragraphe. Si la fusion de marge externe n'advient pas, la marge entre tous les paragraphes suivants sera la somme de la marge externe supérieure et inférieure adjacente. Cela signifie que l'espace entre les paragraphes est deux fois plus grand que le sommet de la page. Si la fusion de marge externe se produit, la marge externe supérieure et inférieure des paragraphes se fusionnent ensemble, de sorte que la distance à tous les endroits soit uniforme.
Remarque :Seule la marge externe verticale des boîtes en flux de document standard subit la fusion de marge. Les marges entre les boîtes en ligne, les boîtes flottantes ou les éléments en position absolue ne se fusionnent pas.
- Page précédente Marge externe CSS
- Page suivante Vue d'ensemble de la position CSS
