CSS基礎 練習問題 31:CSSの高さ指定(自動調整)
CSSで要素の高さを固定値ではなく、内容量に応じて自動的に調整させたい場合、正しい記述はどれか。
- .box { height: auto; }
- .box { height: fixed; }
- .box { height: content; }
- .box { height: 0%; }
- .box { height: inherit-content; }
正解と解説を見る
正解:.box { height: auto; }
heightプロパティに「auto」を指定すると、要素の高さは内容量に応じてブラウザが自動的に計算する。これはheightプロパティの初期値でもある。
【正解の理由】
「height: auto;」は要素の高さを内容に応じて自動調整するための正しい指定方法であり、多くの要素で初期値として採用されている。
【不正解の理由】
• 「height: fixed;」:CSSのheightプロパティにこのような値は存在しない
• 「height: content;」:このような値は存在しない(似た概念として「fit-content」があるが「content」単体は無効)
• 「height: 0%;」:これは高さを0にする指定であり、内容量に応じた自動調整にはならない
• 「height: inherit-content;」:CSSに存在しない無効な値である