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 :パディングとボーダーを幅と高さに含める