Pourquoi les pourcentages de marge et de remplissage CSS sont-ils relatifs à la largeur et non à la hauteur ?

Pourquoi les pourcentages de marge/remplissage en CSS sont liés à la largeur

Le modèle de boîte CSS définit que les pourcentages de marge et de remplissage sont calculés en fonction de la largeur du bloc contenant. Ce comportement particulier a soulevé des questions sur sa justification.

Extrait souligné de la spécification du modèle de boîte CSS

"Le pourcentage de [marge] est calculé par rapport à la largeur de le bloc contenant la boîte générée. Notez que cela est vrai pour 'margin-top' et 'margin-bottom' comme. bien."

Conjecture sur le raisonnement

Impact sur la taille des parents en tant que facteur limitant

Une conjecture non fondée suggère que la décision peut provenir de préoccupations concernant le calcul de la hauteur. La hauteur des éléments est généralement définie par la taille de leurs enfants. Si padding-top est appliqué sous forme de pourcentage par rapport à la hauteur du parent, cela affecte la hauteur du parent. Cependant, comme la taille de l'enfant dépend de la taille du parent et vice versa, cela crée une boucle de dépendance ou un calcul de taille inexact.

Considérations sur les scénarios imbriqués

Ceci cette préoccupation est particulièrement pertinente dans les cas où la taille du parent dépend de la taille de l'enfant et où la taille de l'enfant dépend de la taille du parent (par exemple, un parent décalé === parent). La résolution de tels cas devient difficile en raison de la boucle de dépendance ou du calcul infini.

Exemple

Considérez l'extrait de code suivant :

<div>

Dans ce Par exemple, la marge supérieure du div interne est calculée à 10 % de la largeur du div parent (200 px), ce qui donne un résultat Marge de 20px.

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!