CSS3box-sizing プロパティ

width や height で大きさを指定したboxに
marginやborder、paddingを指定した時、
レイアウトが崩れたという経験はありませんか？

sample.css

  width: 300px;
  height: 100px;
  border: 10px;

そんな時は、ボックスサイズの算出方法を見直してみるといいかもしれません。

具体的にどこを見るの？？

box-sizingプロパティを指定することで
ボックスサイズ(width, height) の算出方法を指定することができます。

初期値ではbox-sizing: content-box；となっています。

sample.css

  width: 300px;
  height: 100px;
  box-sizing: content-box;

このcontent-boxとは、パディングとボーダーを幅と高さに含めない状態を指します。
言い換えると、heightやwidthの大きさとは別で、
marginやborder、paddingの大きさが含まれている状態です。

んじゃ、どうすればいいの？？

box-sizingをborder-boxと指定してあげましょう。

もうお分かりかもですが、
border-boxはパディングとボーダーを幅と高さに含める状態を指します。

まとめ

content-box：パディングとボーダーを幅と高さに含めない（初期値）
border-box ：パディングとボーダーを幅と高さに含める