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 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 d'étiquette remplit la hauteur de son parent, il est essentiel de définir une hauteur explicite ou d'utiliser une boîte flexible ou des grilles pour contrôler la hauteur. disposition et assurez-vous que la hauteur souhaitée est atteinte.