Définition et règles de calcul du chevauchement des marges

Chevauchement des marges

Extrait de la version chinoise de la spécification CSS2.1

En CSS, les marges adjacentes de deux cases ou plus (peuvent mais pas nécessairement être frères) sont regroupés dans une marge. La combinaison des marges de cette manière est appelée effondrement
, et la marge combinée résultante est appelée marge de chevauchement.

Règles de calcul du chevauchement des marges

Extraites de la version chinoise de la spécification CSS2.1

Lorsque deux marges ou plus sont fusionnées, la marge générée width est la valeur maximale des largeurs de marge combinées. Comme pour les marges négatives, soustrayez la valeur absolue maximale des marges adjacentes négatives de la valeur maximale des marges adjacentes positives. S'il n'y a pas de marge positive, soustrayez la valeur absolue maximale des marges adjacentes de 0

Qu'est-ce que la marge adjacente

Extrait de la version chinoise de la spécification CSS2.1
Deux les marges sont adjacentes si et seulement si :

• appartiennent toutes deux à des boîtes au niveau du bloc InStream et sont dans le même contexte de formatage de bloc.

• Pas de cases de ligne, pas d'espace, pas de remplissage et pas de bordures pour les séparer (attention, donc quelques cases de ligne de 0 hauteur)

• tous appartiennent aux bords de boîte verticalement adjacents (bords de boîte verticalement adjacents), c'est-à-dire à l'une des paires suivantes :
  1. La marge supérieure d'une boîte et la marge supérieure de son premier enfant entrant
  . 2. La marge inférieure d'une boîte et la marge supérieure de son prochain frère entrant suivant
  3. La marge inférieure du dernier enfant entrant et de son parent La marge inférieure, si la valeur calculée de la taille du parent. est 'auto'
  4. Les marges supérieure et inférieure d'une boîte, la boîte n'établit pas de nouveau contexte de formatage de bloc et la valeur calculée de min-height est 0, la valeur calculée de height est 0 ou 'auto'. , et il n'y a pas d'enfants entrants

Si une partie d'une marge est adjacente à une autre marge, elle est considérée comme liée à cette marge. Le voisin est la marge réduite.

Analyse détaillée de chaque condition

1. Elles appartiennent toutes à des boîtes au niveau du bloc InStream et sont dans le même contexte de formatage de bloc.

Qu'est-ce qu'un élément InStream ? Si un élément est flottant, en position absolue ou est l'élément racine, alors il s'agit d'un élément hors flux. Si un élément n’est pas en dehors du flux, on l’appelle un élément entrant.
La boîte au niveau du bloc In-Stream est une boîte générée par des éléments au niveau du bloc In-Stream.

Conclusion 1 : La marge de la boîte de l'élément racine ne se chevauchera pas (raison : bien que l'élément racine soit une boîte de niveau bloc, ce n'est pas un élément entrant).

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!