お寿司か焼き肉食べたい

まじめな事からしょーもない事まで
めにゅーを開く(投げやり)

paddingとかborderとかも受け入れてやろう

通常、CSSにおいて、paddingとborderは要素の幅高さに含まれないものでした。
なので、幅高さを指定する場合は、paddingとborderの値を引いて設定を行う必要がありましたのです。
それらを考えずに設定できるようになるのが
box-sizingなのです。

box-sizing

指定できるのは3パターン

  1. content-box
  2. border-box
  3. inherit

指定パターンの解説!

content-box

こいつは初期値です。
つまり、今まで通りpaddingとborderを幅高さに含めない仕様になります。

border-box

paddingとborderを幅高さに含めます。

ワァオ!大漁大漁!

inherit

親要素の値を継承します。
親で使われている場合はソレを使うようにするんですね。
地味なのでデモはありません。