Simple HTMLHTMLリファレンス

Main Menu

おすすめリンク

Site Info.

CSSプロパティ

HTMLリファレンス

CSSリファレンス

その他の記事

CSSリファレンス インデックス

スポンサーリンク

CSSリファレンス

DIMENSIONS寸法TOPCSSPropertiesDimensions

  1. heightボックス領域の高さ
  2. min-heightボックス領域の最小高さ
  3. max-heightボックス領域の最大高さ
  4. widthボックス領域の幅
  5. min-widthボックス領域の最小幅
  6. max-widthボックス領域の最大幅

heightボックス領域の高さ

プロパティの値<length> | <percentage> | auto | inherit
初期値auto
対象要素全要素(非置換インライン要素、テーブルの列・列グループ要素を除く)
継承しない
%親ブロックの'height'値に対する割合
メディアvisual
W3C Ref.CSS2.1CSS3

プロパティの書式と機能

heightプロパティは、ボックスモデルにおけるボックス領域の高さを指定します。 <length>や<percentage>(数値や割合)で高さを固定できるほか、autoを指定した場合は内包するコンテンツの量に応じて高さが決まります。対象要素はブロックレベル要素か置き換え要素である必要があり、displayプロパティのblockやinline-blockの指定とセットで使われることが多いプロパティです。

Box model content-box

プロパティの値

height: <length>

ボックス領域の高さを<length>値で指定します。
マイナス値は不正な値として無視されます。

height: <percentage>

親ブロックの高さ(height値)に対するコンテンツ領域の高さの割合を指定します。親ブロックの高さがautoの場合は、パーセンテージ値はautoとして扱われます。また、テーブルセル及びセルの行グループの高さに対するパーセンテージもautoとして扱われます。

height: auto

ボックス領域の高さは内包するコンテンツの高さに応じて自動的に計算されます。

MEMO

ボックスモデルとボックス領域

ボックスモデルとは、margin, border, padding, コンテンツ領域の4つの要素によって構成される矩形領域です。height及びwidthで指定する値は、この矩形領域(ボックス領域)の高さと幅を対象としています。CSS2.1におけるボックス領域はコンテンツ領域となっていますが、CSS3で追加されたbox-sizingプロパティを使うことにより、ボーダーを含めた領域をボックス領域として定義することが可能です。
詳しくは、下記リンクを参照して下さい。

  1. ボックスモデル
  2. box-sizingプロパティ
スポンサーリンク
Copyright (C) 2010 Simple HTML. All Rights Reserved.