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

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 :

• Cohérence horizontale et verticale : Les pourcentages de marge supérieure et inférieure doivent se comporter de manière cohérente par rapport à la marge gauche et à la marge -des pourcentages de droite, qui sont basés sur la largeur.
• Éviter la dépendance circulaire : La hauteur d'un bloc est généralement déterminée par son contenu, qui à son tour dépend des marges supérieure et inférieure. Baser les marges verticales sur la largeur rompt cette dépendance circulaire et permet une mise en page logique.

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!