Pourquoi les pourcentages de marge CSS sont-ils toujours basés sur la largeur du bloc conteneur ?

Comprendre les pourcentages de marge/remplissage en CSS

En CSS, le modèle de boîte définit la façon dont les marges et le remplissage sont calculés par rapport aux dimensions du bloc contenant . Selon la spécification CSS, les pourcentages de marge sont toujours calculés en fonction de la largeur du bloc conteneur. Ce comportement s'étend aux marges supérieure et inférieure.

La justification de cette décision reste floue, mais les spéculations suggèrent qu'elle a été prise pour éviter des conflits potentiels avec les calculs de hauteur des éléments parents. Si les pourcentages de remplissage étaient basés sur la hauteur, cela affecterait la hauteur de l'élément parent, et vice versa. Cela pourrait conduire à une boucle infinie de recalculs de hauteur ou à des valeurs de hauteur inexactes.

Pour comprendre ce comportement, prenons un exemple pratique :

<div>

Comme prévu, les marges supérieure et gauche du div interne représentent tous deux 10 % de la largeur externe du div, soit 20 px. Cependant, si les pourcentages de marge étaient basés sur la hauteur, la marge supérieure du div interne serait de 80 px, ce qui entrerait en conflit avec la hauteur spécifiée par le parent de 800 px.

Bien que les pourcentages de marge calculés par rapport à la largeur puissent sembler contre-intuitifs dans certains scénarios, ils maintient la cohérence dans le modèle de boîte CSS et évite les problèmes potentiels de calcul de la hauteur.

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!