高さを 100% に設定すると、ラベル要素が親の高さを満たさないのはなぜですか?

ラベル要素で高さプロパティが機能しない

ラベル要素の高さを 100% に設定しようとすると、期待した効果が得られない可能性があります。これは、高さプロパティが単独で存在しないためです。

提供されたコード スニペットが示すように、ラベルの CSS ルールは高さを 100% に設定します。しかし、「100％って何？」という疑問は残ります。が生じます。 height プロパティは、親要素の高さのパーセンテージを指します。この場合、ラベル要素の親はフィールド要素です。

フィールド要素の CSS または親の CSS で明示的な高さが定義されていない場合、ブラウザはデフォルトのスタイルに依存します。デフォルトでは、div (この場合はフィールドに使用) などのブロックレベル要素の高さは、その内容によって異なります。このデフォルトの高さは、ラベルの意図した 100% の高さと一致しない可能性があります。

したがって、ラベル要素が親の高さを確実に埋めるには、明示的な高さを設定するか、フレックスボックスまたはグリッドを使用してラベル要素を制御することが重要です。レイアウトを変更し、希望の高さが達成されていることを確認します。

以上が高さを 100% に設定すると、ラベル要素が親の高さを満たさないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。