height
heightは、要素の高さを指定するスタイルです。
解説
値には数値、割合、autoの３パターンで指定できます。
構文
構文は以下になります。
height: 値;
値
heightには以下の値が指定できます。
| 値 | 説明 |
|---|---|
| 数値 | pxなどの単位と共に数値で指定する （例）height:300px; |
| 割合 | 割合で指定する （例）height:70%; |
| auto | 要素の内容により自動で指定される （例）height:auto; |
太字の値は初期値です。
サンプル
要素の高さを80pxにする
.sample01 {
height:80px;
}
<div class="sample01">height:80px</div>
height:80px;
分かりやすくするため、上記結果例では枠線と背景色を指定しています。
要素の高さを70%にする
.sample02 {
height:70%;
}
<div class="sample02">height:70%</div>
height:70%;
外側の要素に対して70%のサイズになっています。
備考
- auto（自動サイズ）がデフォルトのため、自動サイズにしたい場合は特に指定は不要です。
関連項目
- height：要素の高さを指定する
- width：要素の幅を指定する
- box-sizing：ボックスサイズの計算方法を指定する
