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つの領域を持っています。 表示領
![【CSS】box-sizingの意味は?スマホ対応に必須の理由を解説 | ZeroPlus Media](https://cdn-ak-scissors.b.st-hatena.com/image/square/ea72dbac60c6cd979d999d24ca7250ea9e8fb1eb/height=288;version=1;width=512/https%3A%2F%2Fzero-plus.io%2Fmedia%2Fwp-content%2Fuploads%2F2022%2F08%2Fbox-sizing-min.jpg)