ボックスの横幅の計算方法、皆さんご存じでしょうか。
一般的には
widthの値 + padding左右ぶん + border左右ぶん
が、最終的なそのボックスの横幅になりますね。
ボックスというのは、paddingとborderが内側にあって、marginは外側にある…という仕組みを理解していれば
まぁしょうがないのかな…というような気にもなったりはしますが
それでも計算めんどくさい！！
というあなたにおすすめのプロパティです。
その名もbox-sizingちゃん
リファレンスはこちら→http://www.htmq.com/css3/box-sizing.shtml
つまり、ボックス幅（と高さ）の算出方法を変えてくれるってことです！
デフォルトの値（初期値）は、
box-sizing: content-box;これが、冒頭で触れた、widthとpadding左右ぶんとborder左右ぶんを別々に足し算しないといけない方法です。
そして、今回ご紹介したい書き方はこちら↓
box-sizing: border-box;これは、padding左右ぶんとborder左右ぶんをwidthに含めてくれるというハイパー便利な記述なのです！
これがあれば、
「とりあえず横並びにしたいからwidth: 50%にして～、内側に余白着けたいからpadding10px設定して～、あ、borderも2pxつけるから・・・・最終的にwidthは・・・calc(50% – 12px)…？」
みたいなよくわからないことをしなくて済むんです！！！！
そんな式を書くくらいならbox-sizing: border-box を書いてあげましょう！！！
多分レスポンシブサイトを作るとき（単位％やvwを多用するシーン）に重宝すると思うので
中級者さんはぜひ覚えておいてくださいね(*’▽’)
