Maison > interface Web > tutoriel CSS > le corps du texte

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

Patricia Arquette
Libérer: 2024-11-01 08:42:30
original
788 Les gens l'ont consulté

Why is Margin-Top Percentage Calculated Based on Width in 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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal