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é. Contrairement à la croyance populaire, le pourcentage de marge supérieure est déterminé en fonction de la largeur du bloc conteneur, 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é raccourcie « margin ». Baser les marges verticales sur la largeur du conteneur permet de maintenir un dimensionnement de marge 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 du bloc, 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 :

.container {
  width: 500px;
  height: 100px;
}

p {
  margin-top: 50%;
}

La « marge supérieure » de 50 % pour l'élément « p » sera calculée 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 d'une taille 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.