CSSのwidth:100%とautoの違い/box-sizing属性の使い方

cat IT

widthを横幅いっぱいに表示したい、という場合、width:100%とwidth:autoではどちらが正しいのでしょうか?

Advertisements

width:autoとwidth:100%

displayによるちがい

実は、デフォルト値がこれです。定義としては、要素がinlineまたはinline-block要素の時は要素の中身の長さ。block要素の時は横幅いっぱいとなります。
inline要素/width:auto
inline-block要素/width:auto
block要素/width:auto
inline要素はwidthを変更できないため、100%を指定しても長さはやはりテキストの長さですが、inline-blockの場合はwidthが適用され、親要素一杯に広がります。
inline要素/width:100%
inline-block要素/width:100%
block要素/width:100%
なので、display:inline-blockの要素に対してwidth:autoを指定しても横幅いっぱいに広がらないというのが、表題に対するひとつの答えとなります。

paddingとborderによるちがい

width:autoの場合、widthにはpaddingとborderが含まれるように自動的に調節されますが、width:100%にはpaddingとborderが含まれません。

padding:10px border:3px width:auto
padding:10px border:3px width:100%



ただし、CSSでbox-sizingをborder-boxに設定すれば、100%でもauto同様にborder、paddingを含むようになります。

幅、高さにborder、paddingを含めるかの設定
box-sizing: 値;

※content-box(初期値):含めない
border-box:含める
inherit:box-sizingの設定を親要素に依存する

padding:10px border:3px width:auto box-sizing:border-box

width:100%とautoの違いについては以上です。

CSSの便利な使い方・プロパティ逆引きリファレンス
HTMLと合わせてぜひマスターしたい、CSS関連の記事のまとめとなります。プロパティの名称と使用用途を合わせて併記しています。 ちょっととっても数少ないですが、段々増える予定です。

コメント