Comment le pourcentage de marge supérieure est-il calculé en CSS ?
Lors de l'application d'un pourcentage de marge supérieure à un élément enfant dans un conteneur parent, il est important de comprendre comment le pourcentage est calculé. Les marges en pourcentage sont relatives à la largeur du bloc contenant, et non à la hauteur.
Spécification W3C
Selon la spécification W3C, le pourcentage de marge supérieure est calculé avec par rapport à la largeur, et non à la hauteur, du bloc conteneur. Cela garantit la cohérence entre les marges horizontales et verticales et évite les dépendances circulaires lors du calcul de la hauteur des éléments.
Raison du calcul de la marge basée sur la largeur
Il existe deux principales raisons de baser marges verticales sur la largeur du bloc contenant :
Exemple
Considérons un scénario avec un conteneur parent avec une hauteur de 100px et une largeur de 500px, et un élément enfant avec margin-top : 50%. Le pourcentage de marge supérieure est calculé par rapport à la largeur du conteneur, qui serait de 50 % de 500 px. Par conséquent, la marge supérieure serait de 250 px, soit la moitié de la largeur.
Exemple de code
Le CSS suivant démontre l'effet de la définition de la marge supérieure à 50 % avec un conteneur basé sur la largeur :
<code class="css">.container { background: lightblue; padding: 10px; height: 100px; width: 500px; } p { display: block; border: 1px solid red; margin-top: 50%; }</code>
Dans cet exemple, l'élément enfant aura une marge supérieure de 250 px, qui est calculée comme 50 % de la largeur de 500 px du conteneur.
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!