CSS3: height プロパティ - 要素の高さ

■ 概要

項  目説  明
記述形式 セレクタ {height: }
値 の形式 数値 (長さ,%) | autoinherit
初 期 値 auto
対応ブラウザー C1+ / e3+ / N4+ / Fx1+ / Op3.5+ / Ch1+ / Sa1+
適用可能な要素 すべての要素
継  承 しない

■ 解説

heightプロパティ は,要素の高さを指定します。 

指定できる値の形式は,以下のとおりです。

説  明
長  さ 下表に示すような単位を用いて要素の高さを指定します。
パーセント(%) 基準となるボックスやウィンドウの高さを1とした百分率で指定します。
auto ブラウザーの仕様に任せます。 (初期値)
inherit 親要素の heightプロパティの設定を継承します。

数値では,次のような単位を付けて指定が可能です。

単位説  明
px
px とは画面の1画素(ピクセル) のサイズを1とする単位です。 実際に表示されるサイズは 72dpi や 96dpi といったモニタの解像度により変化します。
em
em とは現在使用中の標準フォントの高さを1とする単位です。 
ex
ex とは現在使用中の標準フォントの小文字の「x」の高さを1とする単位です。
親要素の widthプロパティ の値を基準にして割合を%値で指定します。

現在,CSS3 の sizing ワークグループでは widthプロパティheightプロパティ新しいキーワード を導入することが議論されているようです。  まだ,仕様が確定しているようではありませんので,ここでは従来の仕様に従った説明にしております。

■ 使用例( height プロパティの利用)

HTMLソース
CSS
<head> ~ </head>
<style type="text/css">
<!-- 
   div.sample { width: 240px; height: 240px; 
                background-color: #00AAAA; }
   img.sample { margin: 20px; }
-->
</style>
HTML
<body> ~ </body>
<div class="sample">
   <img class="sample" src="logo.gif" alt="大阪教育大学ロゴ"
        width="200" height="199">
</div>

ブラウザー 表示例
大阪教育大学ロゴ

■ 備考

【参考ページ】