Pourquoi les hauteurs en pourcentage dans CSS se comportent-elles différemment des largeurs en pourcentage ?

Pourquoi la hauteur en pourcentage diffère de la largeur en CSS

Question : Malgré l'application réussie des valeurs en pourcentage pour la largeur, pourquoi les hauteurs en pourcentage ne parviennent-elles pas à obtenir le même effet ?

Réponse : La distinction fondamentale réside dans le comportement par défaut du bloc éléments. La hauteur de ces éléments s’adapte intrinsèquement au contenu qu’ils renferment. considérons l'exemple suivant :

<div>

Ici, #inner se développera verticalement pour accueillir le texte dans le

, et #outer ajustera sa hauteur pour contenir #inner.

Lorsque vous spécifiez un pourcentage de hauteur ou de largeur, il fait référence à l'élément parent. Pour la largeur, les éléments de bloc s'étendent généralement sur toute la largeur de leur parent, ce qui rend le résultat prévisible. Définition de la largeur : 50 % se traduit par une largeur de pixel spécifique.

Cependant, la hauteur diffère car la hauteur des éléments de bloc est déterminée par le contenu. Attribuer une hauteur : 50 % est ambigu sans définir explicitement la hauteur de l'élément parent. Cette boucle de rétroaction entre les éléments parents et enfants crée une incertitude dans la détermination de la hauteur finale. Pour rompre ce cycle, l'élément parent doit posséder une hauteur spécifiée.

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!