Pourquoi mon élément d'étiquette ne remplit-il pas la hauteur de son parent lorsque je règle sa hauteur à 100 % ?

La propriété Height ne fonctionne pas sur l'élément d'étiquette

Lorsque vous essayez de définir la hauteur d'un élément d'étiquette à 100 %, cela peut ne pas avoir l'effet souhaité. En effet, la propriété height n'existe pas de manière isolée.

Comme le démontre l'extrait de code fourni, la règle CSS pour l'étiquette définit la hauteur sur 100 %. Cependant, la question « 100 % de quoi ? surgit. La propriété height fait référence au pourcentage de la hauteur de l'élément parent. Dans ce cas, le parent de l'élément label est l'élément field.

Si l'élément field n'a pas de hauteur explicite définie dans son CSS ou dans le CSS de son parent, le navigateur s'appuiera sur le style par défaut. Par défaut, la hauteur d'un élément de niveau bloc comme un div (utilisé pour field dans ce cas) dépend de son contenu. Cette hauteur par défaut peut ne pas s'aligner sur la hauteur de 100 % prévue pour l'étiquette.

Par conséquent, pour garantir que l'élément label remplit la hauteur de son parent, il est essentiel de définir une hauteur explicite ou d'utiliser une flexbox ou des grilles pour contrôler la hauteur. disposition et assurez-vous que la hauteur souhaitée est atteinte.

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!