paddingとかborderとかも受け入れてやろう
通常、CSSにおいて、paddingとborderは要素の幅高さに含まれないものでした。
なので、幅高さを指定する場合は、paddingとborderの値を引いて設定を行う必要がありましたのです。
それらを考えずに設定できるようになるのが
box-sizingなのです。
box-sizing
指定できるのは3パターン
- content-box
- border-box
- inherit
指定パターンの解説!
content-box
こいつは初期値です。
つまり、今まで通りpaddingとborderを幅高さに含めない仕様になります。
border-box
paddingとborderを幅高さに含めます。
ワァオ!大漁大漁!
inherit
親要素の値を継承します。
親で使われている場合はソレを使うようにするんですね。
地味なのでデモはありません。