height

スペーシング・サイズ

要素の高さを指定するプロパティです。px, %, vh, emなど様々な単位が利用できます。

構文

Syntax
height: <length> | <percentage> | auto | min-content | max-content | fit-content

コード例

1

height: 200px;
実行結果
height: 60px
固定高さ(60px)

高さを200pxに固定

2

height: 100%;
実行結果
height: auto(内容に応じて高さ可変)
テキストが増えると高さも増えます。
height: auto(デフォルト値、内容に応じて高さが決まる)

親要素の高さに合わせる

3

height: fit-content;

内容に合わせて高さを自動調整

💡 TIPS

%指定は親要素の高さが明示されていないと効かない。

⚠️ よくある間違い

高さを固定するとレスポンシブで崩れることがある。

関連プロパティ

ブラウザサポート

全ブラウザ対応