height縦方向の寸法
要素の優先する高さを指定します。初期値のautoでは内容などから高さを計算します。
height
要素の高さを決めるプロパティ。親要素の中で箱が縦に伸びたり縮んだりする様子を確かめます。
遊んでみよう
親要素の中で高さを変更
height
CSS
.element height: 160px;
値のパターン
heightの構成要素
<length> | <percentage>長さと割合
pxなどの長さは固定値、%は高さが明示された包含ブロックを基準にします。
box-sizingどこまでを高さに含めるか
content-boxでは内容領域、border-boxではpaddingとborderまでを指定した高さに含めます。
早見表
まずはauto・px・%の違いを押さえます。画面を基準にしたいときはvhも使えます。
01
autoブラウザーが計算初期値02
240px長さで固定絶対的な高さ03
50%親の高さの半分親の高さが必要04
100vh画面と同じ高さビューポート基準よくある使い方
01
画像の表示領域を揃える
カード画像の高さを揃え、object-fitと組み合わせて縦横比の異なる画像を同じ枠へ収めます。
height: 180px; object-fit: cover;02
正方形のアイコンを作る
用途上の寸法が決まっているアイコンは、widthとheightへ同じ長さを指定します。
width: 48px; height: 48px;03
親要素の高さに合わせる
高さが明示された親要素の中で、子要素を縦いっぱいに広げたいときに100%を使えます。
height: 100%;ポイント
文章の箱は、固定した高さで切らない。
文字を拡大したときや文章が増えたとき、固定したheightから内容があふれる場合があります。最低限の高さだけを決めたいときはmin-heightを使います。min-heightとmax-heightはheightより優先され、置換要素ではないinline要素にはheightが適用されません。heightは通常、子要素へ継承されません。
関連するCSSも見てみよう。
height と一緒に使われるプロパティや、詳しい外部リファレンスをまとめました。