CSS3 box-sizing說明

CSS3的box-sizing提供兩種設定：content-box和border-box。這兩種的差別在於，border、padding、margin等的長寬值是否被包含在element的長寬裏面。直接用範例來解釋：

.demo-normal {
  border: 5px solid;
  width: 200px;
  height: 150px;
  margin: 10px;
  padding: 10px;
  text-align: center;
  line-height: 150px;
}

.demo-content-box {
  box-sizing: content-box;
  -ms-box-sizing: content-box;
  -o-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
}

.demo-border-box {
  box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

第一個DIV沒有套用box-sizing，第二個box-sizing值是content-box，第3個是border-box。這3個DIV的width是200 pixel，height是150 pixel；padding是10 pixel；border width是5 pixel；margin是10 pixel。

Normal DIV

content box

border box

從這範例來看，普通的DIV和套用content-box的DIV樣式一樣，套用border-box樣式的DIV比較小。可以用Firebug之類的工具查看這3個DIV的offsetWidth/offsetHeigth的值，會發現第1個和第2個的值是230/180 pixel，第3個是200/150 pixel。

因此，由此範例可知，border-box將padding和border width含括在div的原始寬高內，但margin不受此限。而content-box則是預設的樣式。