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