box-sizing

box-sizing プロパティは上記の振る舞いを調整するために使用できます。

content-box は CSS の box-sizing における既定の振る舞いです。ある要素の幅を 100 ピクセルに設定した場合、その要素のコンテンツ領域の幅が 100 ピクセルになり、境界やパディングを加えたものが最終的に表示される幅になり、要素が 100px よりも広くなります。

border-box は、境界およびパディングを、要素に指定した width および height の中で取るようブラウザーに指示します。要素の width を 100 ピクセルに設定した場合、100 ピクセルの中に追加した境界やパディングが含まれ、コンテンツ領域はそれらの幅を吸収するために縮小されます。これで普通は、要素に対するサイズ設定をもっと簡単になります。

box-sizing: border-box はブラウザーが <table>, <select>, <button> の各要素、また <input> 要素のうち type が radio, checkbox, reset, button, submit, color, search であるものに対して使用する既定のスタイル付けです。