Comment le pourcentage de marge supérieure est-il calculé en CSS ?

Calcul du pourcentage de marge supérieure en CSS

Le calcul du pourcentage de marge supérieure en CSS nécessite la compréhension de son point de référence. Contrairement aux hypothèses intuitives, il n'est pas calculé à partir de la hauteur du parent mais plutôt de sa largeur.

Plonger dans la spécification du W3C

La spécification du W3C indique clairement : "Le pourcentage est calculé par rapport à la largeur du bloc conteneur de la boîte générée." Cela est vrai à la fois pour la marge supérieure et la marge inférieure.

Assurer la cohérence et éviter la dépendance circulaire

Marges basées sur un pourcentage de tous les côtés (marge supérieure, - right, -bottom, -left) assurent la cohérence de la mise en page. L'utilisation d'un pourcentage pour les marges horizontales et verticales évite les disparités dans la taille des marges.

De plus, les marges verticales basées sur la largeur du conteneur évitent la dépendance circulaire dans la mise en page. La hauteur du bloc dépend de son contenu, tandis que la hauteur du contenu nécessite des calculs incluant les marges supérieure et inférieure. En ancrant les marges verticales à la largeur du conteneur, cette dépendance est rompue, permettant une mise en page efficace.

Exemple de code

.container {<br> background : lightblue ;<br> remplissage : 10px;<br> hauteur : 100px;<br> largeur : 500px;<br>}</p>
<p>p {<br> affichage : bloc ;<br> bordure : 1px rouge uni ; <br> margin-top : 50%;<br>}<br>

Lors de l'exécution, la marge supérieure est mesurée par rapport à la largeur de 500 px du conteneur, ce qui donne une marge de 250 px. .

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!