heightプロパティ

TOPページに戻る > CSS

スポンサード リンク

heightプロパティ

HTML要素の縦の高さを指定できます(paddingを含まない横幅)
値はpx、emなどの単位、親ブロック要素の割合を%で指定、auto (autoは表示できる幅まで広がります)
paddingの幅はheightの幅には含まれません。paddingを指定している場合、heightの幅+paddingが要素の縦の高さになります

使い方(書式)

セレクタ { height: 値; }                                    

heightプロパティ

対応ブラウザ ie6 ie7 ie8 ie9 ie10 ie11 google Chrome safari fire fox opera
適用できる要素 ブロック要素とtd th input textarea select img
子要素へのスタイルの継承 しない

プロパティの値 説明
単位 px、emなどの単位
% パーセントで指定。親ブロック要素の高さの割合を%で指定
auto 文字や画像に合わせて高さを自動調整。初期値

実際の指定方法

.hoge { height: 100px; }     /* 100pxの縦の高さに指定 */
.hoge2 { height: 50%; }      /* 親ブロック要素の50%の縦の高さ */
.hoge3 { height: auto; }     /* 文字や画像に合わせて自動調整 */
.hogebox { 
 height: 100px;              /* 親box */
 border: solid 1px #0000FF;  /* 親boxの枠線 */
 }

html部分

<div class="hoge">height: 100px;</div>
<br>
<div class="hogebox">
<div class="hoge2">height: 50%;</div>
</div>
<br>
<div class="hogebox">
<div class="hoge3">height: auto;</div>
</div>

実際の表示

height: 100px;

height: 50%;

height: auto;




(C)2012 ホームページ作成無料