幅と高さを指定する

width: 幅　　height: 高さ

幅・高さ　　　　単位付きの数値　・　％　・　auto　

width プロパティと height プロパティは、内容を表示する部分の幅と高さを設定します。
ブロックレベル要素と置換え要素(img や input、textarea、select など）の他、横列と横列
グループ（tr ・ thead ・tbody ・ tfoot)を除くテーブル関連要素に対して指定できます。
％で指定する場合は、そのボックスを含むボックスの幅または高さに対する割合になります。
値として「auto」を指定すると状況に応じて自動的に調整されますが、
置換え要素の場合には本来の幅や高さになります。
なお、Windows版のInternet Explorer5.5までとInternet Explorer6.0の互換モードでは、
内容の周りの空間と枠線も含んだ範囲に対して幅や高さが設定されてしまいます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<title>CSS覚書</title>
<style type="text/css">
<!--
body {
color: #ff6600;
margin: 10
}
img.small { width:50px;height:50px }
img.normal { auto }
img.large { width:200px; height:200px }
.half {
width:50%;
color: #ffffff;
background: #ff3300
}
h1 { text-align: center }
-->
</style>
</herd>
<body>
<h1>幅と高さを指定する</h1>
<center>
<p>
＊中央がオリジナルサイズ（100px X 100px)
</p>
<p>
<img src="http://www5b.biglobe.ne.jp/~donbey/DSCF0402111.jpg" alt="ドンベー" class="small">
<img src="http://www5b.biglobe.ne.jp/~donbey/DSCF0402111.jpg" alt="ドンベー" class="normal">
<img src="http://www5b.biglobe.ne.jp/~donbey/DSCF0402111.jpg" alt="ドンベー" class="large">
</p>

<hr>

<p class="half">
これ以下のサンプルでは、要素の幅(width)を「50%」に設定しています。
</p>
<p>
select要素：<br>
<select class="half">
<option selected>選択項目</option>
</select>
</p>
<p>
input要素：<br>
<input type="text" class="half" value="入力フィールド">
</p><p>
textarea要素：<br>
<textarea rows="5" cols="30" class="half">
複数行の入力フィールド
</textarea>
</p>
</center>
</body>
</html>

Internet Explorerの幅と高さの
適用範囲に注意！

Windows版のInternet Explorer5.5までとInternet Explorer6.0の互換モードでは、
width プロパティと height プロパティの適用される範囲が標準的な仕様とは異なっています。
具体的には、
本来はボックスの内容部分の
幅や高さを設定する筈のものが、InternetExplorerでは
枠線と内容の周りの空間も含んだ
領域の幅や高さとして設定されます。
特にボックスの枠線をb太くしたり
内容の周りの空間を広く取っている場合には、
正しい表示をするプラウザとは
全然違う表示結果となりますので
注意しましょう。