ボックス領域の幅と高さ指定
width：幅 上の空間 height：高さ 下の空間 これらのプロパティは、パディング（内容を表示する領域と枠線の間の空間）の幅を指定します。
％で指定した場合には、指定されたボックスを含むボックスの横幅に対する割合となります。
上下の空間の幅についても、高さではなく横幅を参照しますので、注意してください。
「padding」を利用すると、上下左右の幅を一度に設定することができます。その場合値を半角スペースで区切って指定しますが、与えられた値の個数によって次のように幅が設定されます。HTMLソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>幅と高さを指定する</title>
<style type="text/css">
<!--
img.small { width: 50px; height: 50px }
img.normal { width: auto; height: auto }
img.large { width: 200px; height: 200px }
.half {
width: 50%;
color: #000066;
background: #ffCCCC
}
-->
</style>
</head>
<body>
<p>
※中央がオリジナルサイズ（100px×100px）
</p>
<p> <img src="../assets/images/AB001174.jpg" alt="" width="100" height="100" class="small">
<img src="../assets/images/AB001174.jpg" alt="" width="100" height="100" class="normal">
<img src="../assets/images/AB001174.jpg" alt="" width="100" height="100" class="large">
</p>
<hr>
<p class="half">
これ以下のサンプルでは、要素の幅（width）を「50%」に設定しています。
</p>
<p>
select要素：<br>
<select class="half">
<option selected>選択項目1</option>
<option>選択項目2</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>
</body>
</html>
