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;
}

業務に役立つPerl

Perlテキスト処理のエッセンス

PerlでポータブルなLinuxファイル管理入門

ITエンジニアの求人情報など

 ITエンジニアの求人情報・Webサービス・ソフトウェア・スクールなどの情報。