Pourquoi la marge supérieure est-elle calculée en fonction de la largeur en CSS ?

Calcul du pourcentage de marge supérieure en CSS

Le pourcentage de marge supérieure est calculé par rapport à la largeur de son bloc conteneur. Cela diffère des marges verticales et horizontales, qui sont calculées respectivement en fonction de la hauteur et de la largeur du conteneur.

Exemple :

Considérez le code CSS suivant :

<code class="css">.container {  
  background: lightblue; 
  padding: 10px; 
  height: 200px;
  width: 500px;
}

p { 
  display: block; 
  border:1px solid red;
  margin-top:50%;
}</code>

Dans cet exemple, l'élément de paragraphe enfant a une marge supérieure de 50 %. Le pourcentage est calculé en fonction de la largeur du conteneur, qui est de 500 px. Par conséquent, le paragraphe est placé à 250 px (50 % de 500 px) du haut du conteneur.

Raisonnement du calcul basé sur la largeur :

Il y a deux raisons principales pour baser les marges verticales sur la largeur du bloc contenant :

• Cohérence horizontale et verticale : Cela garantit que les marges des quatre côtés d'un bloc sont de taille égale, même lorsque en utilisant la propriété de marge abrégée.
• Éviter la dépendance circulaire : Les marges verticales basées sur la hauteur créeraient une dépendance circulaire entre la hauteur du bloc et la hauteur de son contenu, rendant les calculs de mise en page impossibles.

Exemple avec hauteur dynamique :

Pour démontrer l'effet des marges verticales basées sur la largeur, considérez le code suivant :

<code class="html"><div class="container">
  <p id="element"> Some Cool content</p>

</div>

<p>
  MORE TEXT
</p></code>

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

p {
  display: block;
  border: 1px solid red;
  margin-top: 50%;
}</code>

Dans ce cas, l'élément paragraphe a une hauteur dynamique basée sur son contenu. La marge supérieure de 50 % sera toujours calculée en fonction de la largeur du conteneur et non de la hauteur du paragraphe. Cela garantit que le paragraphe reste dans la bonne position quel que soit son contenu.

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!