【CSS】box-sizingの意味は？スマホ対応に必須の理由を解説 | ZeroPlus Media

box-sizingを指定していない初期状態ではcontent-boxが指定されているため、paddingとborderは要素のwidthやheightに含まれません。一方、border-boxを要素に指定すると、paddingとborderは要素のwidthとheightに含まれます。 ここまでの解説で、box-sizingについてなんとなく理解していただけたのではないでしょうか。ただしbox-sizingの理解をより深めるためには、ボックスモデルの概念を学ぶ必要があります。 box-sizingの理解に欠かせないボックスモデルの概念box-sizingの理解を深めるためには、ボックスモデルの概念を知る必要があります。ボックスモデルとは「HTMLにおける全ての要素は四角い箱の中に収められている」という考え方です。 下の図をご覧ください。 HTMLの要素は4つの領域を持っています。 表示領

[himabato]

わかりやすい

[perry-tips]

border-boxを要素に指定すると、paddingとborderは要素のwidthとheightに含まれます。