Pourquoi le pourcentage de marge supérieure est-il calculé en fonction de la largeur du conteneur en CSS ?

Calcul du pourcentage de marge supérieure en CSS

Lors de l'application d'un pourcentage de marge supérieure à un élément, il est essentiel de comprendre comment le calcul est effectué. effectué. Contrairement à la croyance populaire, le pourcentage de marge supérieure est déterminé en fonction de la largeur du bloc contenant, et non de sa hauteur.

Spécification W3C expliquée :

Selon la Spécification du W3C, "Le pourcentage est calculé par rapport à la largeur du bloc conteneur de la boîte générée." Cette règle s'applique à la fois à la « marge supérieure » et à la « marge inférieure ».

Raisons pour lesquelles les marges verticales sont basées sur la largeur du conteneur :

1. Cohérence horizontale et verticale : Les marges en pourcentage pour les quatre côtés d'un bloc doivent rester égales, comme défini par la propriété abrégée « margin ». Baser les marges verticales sur la largeur du conteneur permet de maintenir un dimensionnement des marges cohérent.
2. Éviter la dépendance circulaire : Le calcul de la hauteur du bloc repose souvent sur la compréhension des marges supérieure et inférieure. Cependant, si ces marges dépendaient de la hauteur des blocs, une dépendance circulaire apparaîtrait lors du calcul de la disposition. Baser les marges verticales sur la largeur du conteneur résout ce problème.

Exemple :

Considérez le code suivant :

<code class="css">.container {
  width: 500px;
  height: 100px;
}

p {
  margin-top: 50%;
}</code>

La 'marge -top' de 50 % pour l'élément "p" sera calculé en fonction de la largeur de ".container", qui est de 500 px. Par conséquent, la marge supérieure réelle appliquée sera de 250 px (50 % de 500 px). Cela diffère de l'hypothèse courante selon laquelle il s'agirait de 100 px (50 % de 200 px, la hauteur de ".container").

Conclusion :

En comprenant comment la marge -Les pourcentages supérieurs sont calculés, vous pouvez contrôler efficacement le positionnement des éléments et éviter les problèmes de disposition inattendus. N'oubliez pas que les marges verticales sont basées sur la largeur du bloc conteneur pour maintenir un dimensionnement cohérent et éviter les dépendances circulaires dans la mise en page CSS.

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!