box-sizing - ボーダー幅・パディングをブロックの幅・高さの内側に収める - CSS入門【CSS3対応】
box-sizingを使うと、ボーダー幅・パディングをブロックの幅・高さの内側に収めることができます。
box-sizing:border-box;
実際に違いを見てみましょう。「box-sizing:border-box;」を指定すると幅300pxの内側にボーダーとパディングが描画されるのに対して、指定がない場合は、幅300pxの外側にボーダーとパディングが描画されます。指定がある方が、はるかに直感的で、サイズ調整がしやすいですよね。
「box-sizing: border-box;」指定あり
「box-sizing: border-box;」指定なし
<div style="width:300px;box-sizing:border-box;padding:30px;border:5px solid red"> 「box-sizing: border-box;」指定あり </div> <br> <div style="width:300px;padding:30px;border:5px solid red"> 「box-sizing: border-box;」指定なし </div>
「box-sizing:border-box;」を指定しておくほうが、サイズ調整がやりやすいので、スタイルシート(CSS)のデフォルトの設定として、全称セレクタで指定しておきましょう。
* { box-sizing: border-box; }