ボックス
width
width は要素の幅を決めます。長さで決め打ちするほか、親に対する % や、中身の文章から幅を決めるキーワードでも書けます。
構文
auto | <length-percentage [0,∞]> | min-content | max-content | fit-content | fit-content(<length-percentage [0,∞]>)プレビュー
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
width: 160px;
}コントロール
width160px
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
解説
値の書き方
240pxなどの長さ：その幅にします。50%：親の要素の幅（正確には、中身を置ける幅）に対する割合です。auto：まわりに合わせて決まります。ふつうのブロック要素では親の幅いっぱいに広がります。初期値です。min-content：折り返せるところはすべて折り返したときの幅です。英語なら最も長い単語の幅になります。max-content：一度も折り返さないときの幅です。fit-content：中身に合わせますが、親の幅は超えません。ボタンや見出しを中身の幅にしたいときに使います。
このページのプレビューでは、箱が中央寄せの中に置かれているので、auto は fit-content と同じ幅になります。
padding と border は含まれる？
初期状態では、width は中身の幅だけを決め、padding と border はその外側に足されます。box-sizing: border-box にすると、padding と border を含めた幅になります。