widthプロパティは、ブロックレベル要素と置換要素（img要素とかtextarea要素など）が生成するボックスの内容領域の幅を指定します。
このプロパティを非置換インライン要素（strong要素とかspan要素など）に指定した場合は無視されます。

通常widthプロパティを指定したボックスの内容がボックスからはみ出したりしてもカラム落ちなどはしませんが、IE6においては内容に合わせ横幅が広がってしまうバグが有るため、各要素の横幅には注意が必要です。

対応ブラウザ

• 
• 
• 
• 
• 
• 
• 

プロパティの解説

値

<長さ>｜<パーセント>｜auto｜inherit

初期値

auto

適用される要素

全ての要素（非置換インライン要素及びテーブルの列・列グループ要素は除く）

継承

しません

パーセント値

包含ブロックの幅に対する割合

メディア

visual

値の解説

<長さ>

幅を長さの単位で指定します（300pxとか）。尚、マイナス値は不正です。

<パーセント>

包含ブロックの幅に対する割合を指定します。尚、マイナス値は不正です。

auto

要素やボックスの種類、関連するプロパティの値によって異なります。

widthのサンプル

.item01 {
  width: 350px;
  margin: 20px;
  padding: 10px;
  color: #fff;
  background: #333;
}

.item02 {
  width: 350px;
  margin: 20px;
  padding: 10px;
  border: 10px solid #333;
}

.item03 {
  width: 50%;
  margin: 20px;
  padding: 10px;
  background: #efefef;
}

<p>widthプロパティのサンプル。</p>
</div>

<div class="item02">
<p>widthプロパティのサンプル。</p>
</div>

<div class="item03">
<p>widthプロパティのサンプル。</p>
</div>

内容領域の幅のため、marginプロパティやpaddingプロパティ、borderプロパティの影響は受けません。
このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

widthプロパティのサンプル。

widthプロパティのサンプル。

widthプロパティのサンプル。