一般內容區塊會有三個基本元素：padding、border、margin
若是 box-sizing 的設定不同，對於 padding 與 border 的判斷也會不同
現在有一區塊設定值如下：
width: 200px;height: 100px;border: 1px solid red;padding: 5px;
當（一）box-sizing: content-box; 預設值 時
結果會出現一區塊為
寬 200px+1px+1px+5px+5px=212px高 100px+1px+1px+5px+5px=112px
雖然區塊變大，但內容顯示的區塊仍是維持寬 200px、高 100px，多出來的就是 padding 和 border
當（二）box-sizing: padding-box; 時
結果會出現一區塊為
寬 200px+1px+1px=202px
高 100px+1px+1px=102px
區塊只有增加邊框的部份，padding沒有向外擴大，但卻會是向內，也因此內容顯示的區塊變成了
寬 200px-5px-5px=190px高 100px-5px-5px=90px
當（三）box-sizing: border-box; 時
結果會出現一區塊為
寬 200px高 100px
整個區塊的大小不變，但 padding 和 border 的值都往內，相對的內容顯示的區塊也因此被壓縮成
寬 200px-1px-1px-5px-5px=188px高 100px-1px-1px-5px-5px=88px
結論：如果想要確保不管 padding 及 border 的厚度是多少，區塊都能保持不變的尺寸，使用第三個方式是最好的。不要忘記在設定時，也要加上 -moz-box-sizing 和 -webkit-box-sizing 的設定喔