width

スペーシング・サイズ

要素の横幅を指定するプロパティです。px, %, vw, emなど様々な単位が利用できます。

構文

Syntax
width: <length> | <percentage> | auto | min-content | max-content | fit-content

コード例

1

width: 100px;
実行結果
width: 120px
固定幅(120px)

幅を100pxに固定

2

width: 50%;
実行結果
width: 50%
親要素の50%(親要素幅240px)

親要素の50%の幅

3

width: fit-content;

内容に合わせて幅を自動調整

💡 TIPS

autoはデフォルト値。fit-contentやmin/max-contentはモダンなレイアウトで便利。

⚠️ よくある間違い

親要素の幅に依存する場合、意図しないレイアウトになることがある。

関連プロパティ

ブラウザサポート

全ブラウザ対応