width：ボックス領域の幅を指定する

適用対象	全ての要素（インライン要素を除く）
継承	しない

widthプロパティは、ブロックレベル要素や置換要素の幅を指定する際に使用します。widthの解釈がブラウザによって異なるので気を付けましょう。

widthに与えられる値

width: auto;: 状況に応じて自動設定します。これが初期値です。
width: 数値で指定する;: [px]や[em]などの単位で指定します。
width: %指定;: 親要素からの相対的な割合を、%値で指定します。

widthの使用サンプル

CSS

.text_sample01 {
 width: 300px;
 background-color:#EEEEEE;
 margin: 0px auto 10px auto;
}
.text_sample02 {
 width: 300px;
 border: 10px solid #666666;
 padding: 10px;
 margin: 0px auto 10px auto;
}
.text_sample03 {
 width: 300px;
 background-color:#CCCCCC;
 padding: 20px;
 margin: 0px auto;
}

XHTML

<div class="text_sample01">
text_sample01 [width: 300px;]<br />
borderやpaddingとの組み合わせに気をつけましょう<br />
</div>

<div class="text_sample02">
text_sample02 [width: 300px;]<br />
borderやpaddingとの組み合わせに気をつけましょう<br />
</div>

<div class="text_sample03">
text_sample03 [width: 300px;]<br />
borderやpaddingとの組み合わせに気をつけましょう<br />
</div>

表示確認

text_sample01 [width: 300px;]
borderやpaddingとの組み合わせに気をつけましょう

text_sample02 [width: 300px;]
borderやpaddingとの組み合わせに気をつけましょう

text_sample03 [width: 300px;]
borderやpaddingとの組み合わせに気をつけましょう

widthに関連するCSSプロパティ

要素の幅や高さ
box-sizing	要素の幅と高さをどのように計算するかを指定する
height	要素の高さを指定する
width	要素の幅を指定する
max-height	要素の高さの最大値を指定する
max-width	要素の幅の最大値を指定する
min-height	要素の高さの最小値を指定する
min-width	要素の幅の最小値を指定する
resize	ユーザーが要素のサイズを変更できるかどうかを指定する