widthを横幅いっぱいに表示したい、という場合、width:100%とwidth:autoではどちらが正しいのでしょうか？
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: 値;
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関連の記事のまとめとなります。プロパティの名称と使用用途を合わせて併記しています。
ちょっととっても数少ないですが、段々増える予定です。
sunagitsune.com
2019.01.27
コメント