此特徵可改變元素預設的矩形格子模型（box model）其計算高與寬的方法。這是 CSS3 建議的特徵。IE8 使用 box-sizing；Safari, Chrome 用 -webkit-box-sizing；Firefox 用 -moz-box-sizing。可設的值有：
- content-box：矩格的寬與高只包括內容，不含內緣（padding），邊線（border），外緣（margin）。此為預設值。
- padding-box：矩格的寬與高包括內容加上內緣。CSS3 無此項，只有 Firefox 支援此項。
- border-box：矩格的寬與高包括內容加上 內緣與邊線。
- 風格用法：
<style type="text/css">
.box {width: 200px;
height: 200px;
padding: 15px;
border: 5px solid red;
}
.box IMG {padding:0; border:none}
#box1 {box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
}
#box2 {box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
</style> <div id='box1' class="box"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg' /> </div>
<div id='box2' class="box"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg' /> </div> - 執行結果：
- 上例中的圖片尺寸是 200px X 200px。Firefox, Safari, Chrome 都成功；IE6 無此項。
javascript 應用。可以用 style 物件 的特徵 boxSizing, webkitBoxSizing, MozBoxSizing 作動態變化。下例中用了三個 toggleCSS()，分別給 IE8, Firefox, Safari, Chrome 使用。
- 風格用法：
<div id='test' class=box><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg' /> </div><script type='text/javascript'>
function toggleCSS(id, pty, v1, v2, ms)
{
var os=document.getElementById(id).style;
os[pty]= (os[pty] == v1 ) ? v2 : v1;
setTimeout('toggleCSS("'+id+'","'+pty+'","'+v1+'","'+v2+'",'+ms+')', ms);
}
toggleCSS("test", "boxSizing", "content-box", "border-box", 1500);
toggleCSS("test", "webkitBoxSizing", "content-box", "border-box", 1500);
toggleCSS("test", "MozBoxSizing", "content-box", "border-box", 1500);
</script> - 執行結果：
