Pourquoi mon pourcentage de « marge supérieure » déborde-t-il du conteneur ?

Calcul du pourcentage de marge supérieure : comprendre l'approche basée sur la largeur

En CSS, les marges verticales, y compris la marge supérieure, sont calculées en fonction de la largeur du bloc contenant. Cette approche garantit la cohérence horizontale et verticale des mesures de marge et évite les dépendances circulaires lors de la mise en page du contenu.

Cohérence horizontale et verticale :

La propriété de marge abrégée vous permet de définir marges pour les quatre côtés. Si les marges verticales étaient basées sur la hauteur plutôt que sur la largeur, les marges sur les différents côtés auraient souvent des tailles différentes, rompant ainsi le comportement cohérent.

Éviter la dépendance circulaire :

Le CSS afficher le contenu en blocs verticaux. La largeur d'un bloc est généralement déterminée par la largeur de son parent. Cependant, la hauteur d'un bloc dépend de son contenu et peut changer de manière dynamique. Si les marges verticales dépendaient de la hauteur, il y aurait une dépendance circulaire entre la taille du parent et la marge de l'enfant.

Exemple :

Considérons le code suivant où l'élément enfant a une marge supérieure : 50 % :

<div class="container">
  <p>Some Cool Content</p> 
 
</div>

.container {  
  background: lightblue; 
  padding: 10px; 
  height: 200px;
}

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

Contrairement à l'attente selon laquelle l'élément enfant serait 50 % en dessous du haut du conteneur (100px), il déborde de la hauteur du conteneur. En effet, la marge en pourcentage est basée sur la largeur du conteneur et non sur sa hauteur. Dans cet exemple, la largeur du conteneur est de 500 px, ce qui donne une marge supérieure de 250 px.

En conclusion, les calculs de marge verticale sont basés sur la largeur du bloc conteneur pour garantir la cohérence, éviter les dépendances circulaires et permettre une mise en page efficace. construction.

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!