説明
heightは高さを固定値や相対値等を使って設定出来ます。記述した文字や画像が設定した高さに満たなくても設定した高さを確保しますが、設定した高さを越える場合ははみ出して表示されます。

heightプロパティは高さを指定出来ます。
heightは高さを固定値や相対値等を使って設定出来ます。記述した文字や画像が設定した高さに満たなくても設定した高さを確保しますが、設定した高さを越える場合ははみ出して表示されます。
heightプロパティの構文は以下の通りです。
height: 高さ;
高さの指定は以下が出来ます。
高さ | 説明 |
---|---|
px | ピクセル指定 |
em | 文字の大きさに対する割合 |
% | 親ボックスの幅に対する割合 |
auto | 必要な高さ(デフォルト) |
heightの利用例は以下の通りです。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。
div {
height: 60px;
}
<div>60px</div>
上記を表示すると以下になります。尚、分かり易さのため、背景を付けています。
文字が60pxの高さに満たなくても60px分の高さが確保されています。
em指定の例は以下の通りです。分かり易いようにwidthやline-heightも指定しています。
div {
width: 1em;
height: 5em;
line-height:100%;
}
<div>あいうえおかき</div>
上記を表示すると以下になります。
5文字分の高さが取られ、6、7文字目ははみ出て表示されています。
%指定の例は以下の通りです。
div {
height: 80%;
}
<div>height例</div>
上記を表示すると以下になります。
点線の枠で高さを60pxに指定しており、その80%の高さを確保します。
デフォルトのautoでは表示に必要な高さだけ確保されます。
<span>タグ等のインラインボックスは必要な高さしか取らないため、指定しても無視されます。
検索付「CSSプロパティ早見表」に戻る
スマホ向け「CSSプロパティ一覧」に戻る
★上ページに含まれるプロパティ