Explication détaillée du code d'image et de texte pour les marges qui ne se chevauchent pas en CSS

Chevauchement des marges

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

En CSS, les marges adjacentes de deux cases ou plus (peut-être mais pas nécessairement frères) seront combinées en 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 pour le chevauchement des marges

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

Lorsque deux marges ou plus sont fusionnées, la largeur de marge résultante est la largeur de marge combinée .la valeur maximale. 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 marges sont adjacent si et seulement si :

• appartiennent tous deux à des boîtes de niveau 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 adjacente à cette marge, oui 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).

Donnez-moi un exemple

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!