勝手に幅が大きくなる
「指定したwidthより大きくなってしまう」といった場合、以下のような原因が考えられます。
borderやpaddingを設定している
borderやpaddingは、widthとは別に幅にプラスされてしまいます。
つまり、width100pxの要素の上下左右にborderを5px、widthを20px設定した場合、100＋(5*2)＋(20*2)で150pxとなります。
幅を計算する際は、borderやpaddingを考慮しましょう。
heightが大きくなる
heightが大きくなってしまう場合、テキストが原因かもしれません。heightはテキストの大きさだけ大きくなってしまいます。
さらに、テキストがline-heightが1emを超えていると、テキストのフォントサイズより大きくなることがあります。
正確にフォントサイズで高さを計算したい場合、line-heightに1meを指定しましょう。