width プロパティは，その名の示すとおり，要素のボックスの幅（正確には，ボックスの“要素の内容”の幅）を指定するものである。

width: 長さ;
width: 百分率;
width: auto;

　このプロパティは，

• 非置換でインラインボックスを生成する要素，表の行（後述），表の行グループ（後述）以外のすべての要素に適用される。
• 初期値は，キーワード auto である。
• プロパティの値は，継承されない。

　ここで，置換要素について触れておくと，これは，要素の内容が外部に用意されたリソースによって置換されるものである。たとえば，画像（HTML では IMG 要素），アプレット，その他外部オブジェクト（プラグインによって生成される要素の内容，Flash ムービーなど）がこれにあたる。一般に，置換要素は，それ固有の寸法（幅・高さ）を持っていることが多い（たとえば，GIF，JPEG，PNG 画像は，画像固有の，“幅○○ピクセル・高さ○○ピクセル”という寸法を持っている）。

　このプロパティの適用条件は複雑であるが，今のところは，ブロックボックスを生成する要素および画像などがその対象になると理解していただければよいだろう（一方で，インラインボックスを生成する非置換の要素，HTML における A，Q および EM 要素などにはこのプロパティは適用されないということである）。

　さて，width プロパティの値の与え方を詳しく見てみよう。

• 長さで与える場合は，ご存じのとおり，絶対長さ，相対長さ指定で与える。負の値は許されない。
• 百分率で与える場合，その要素のボックスの収容ブロックの幅を 100% として指定する。負の値は許されない。
• キーワード auto の場合，margin-left および margin-right プロパティ，ならびに後述する left および right プロパティによって“要素の内容”の幅が決定される。

　ここで，auto を指定した場合の詳細は後述するとして，ここでは典型的な 2 つのケースについて auto の挙動を理解していただきたい。

• 通常のブロックボックスの場合は，そのボックスの幅が収容ブロックの幅と一致するように“要素の内容”の幅が設定される。端的には，収容ブロックの幅から，左右のマージン，枠およびパディングの幅を差し引いたものになる。
• 置換要素の場合は，それが固有の寸法を持つものの場合，その“固有の幅”が“要素の内容”の幅として設定される。

　width プロパティを使用した簡単な例を見ていただこう。以下の例では，パラグラフの幅を収容ボックスの半分に指定している。

H3 { border-bottom: thin solid #66C; }
P { width: 50%; }

<H3>Samba</H3>
<P>Samba は，Windows ネットワークの中で UNIX・Linux マシンをファイルサーバとして運用するさいになくてはならないサービスである。Samba は，その設定を工夫することで，ありがちな「Windows ネットワークが見えない！」というトラブルを防ぐのにも一役買う。</P>

　一方，height プロパティは，“要素の内容”の高さを指定するプロパティである。

height: 長さ;
height: 百分率;
height: auto;

　このプロパティは，

• 非置換でインラインボックスを生成する要素，表の列（後述），表の列グループ（後述）以外のすべての要素に適用される。
• 初期値は，キーワード auto である。
• プロパティの値は，継承されない。

　height プロパティの値の与え方は次のようになる。

• 長さで与える場合は，絶対長さ，相対長さ指定を用いる。負の値は許されない。
• 百分率で与える場合，その要素のボックスの収容ブロックの高さを 100% として指定する。負の値は許されない。ただし，収容ブロックの高さが明示的に指定されていない場合，auto と解される。
• キーワード auto の場合，margin-top および margin-bottom プロパティ，ならびに後述する top および bottom プロパティによって“要素の内容”の高さが決定される。

　このプロパティについても，auto を指定した場合の詳細は後述するが，典型的な 2 つのケースについて auto の挙動を示しておくことにしよう。

• 通常のブロックボックスの場合は，下位要素がすべて入るだけの高さがとられる。
• 置換要素の場合は，それが固有の寸法を持つものの場合，その“固有の高さ”が“要素の内容”の高さとして設定される。

　また，height プロパティによってボックスの高さを明示的に指定して，その中に入るべき内容がボックスに収まりきらない場合，後述する overflow プロパティによって出力のされ方が異なる。なお，既定の場合，ボックスの“要素の内容”に入るべき内容は，ボックスの外にはみ出して出力される。

　height プロパティを用いた例を示しておこう。

H3 { border-bottom: thin solid #66C; }
P { height: 4em; background: #99C; padding: 0.2em; }

　HTML は先ほどと同じものを使用しよう。

　ブラウザのウィンドウ幅を調整し，ボックスの大きさを確認してみよう。

　CSS1 では，height プロパティには長さまたはキーワード auto を与え，百分率を与えることはできない。