[CSS3]box-sizingプロパティでボックス幅の計算方法を指定する

CSS3のbox-sizingプロパティを使うと、ボックスの幅や高さの計算方法を指定することができるようになる。

指定できる値

content-box

paddingやborderはbox幅や高さに含まれない

border-box

paddingとborderはbox幅や高さに含まれる

例

この例の場合、oneとtwoのボックスサイズは同じ大きさとなる。
twoは、paddingとborderがボックスサイズに含まれるので、幅と高さをその分大きく設定している。

  <!-- スタイル定義 -->
  <style>
    #one {
        box-sizing: content-box;
        width: 200px;
        height: 200px;
        border: 10px solid black;
    }

    #two {
        box-sizing: border-box;
        width: 220px;
        height: 220px;
        border: 10px solid black;
    }
  </style>

  <!-- html -->
  <div id="one"></div>
  <div id="two"></div>