平常我們使用width和height屬性定義盒子div的寬或者高時(例如<div style="width: 300px"></div>)，只是在設定裡面內容的寬高，不是div本身的寬高，具體體現：

div {
  padding: 0 10px;
  width: 300px;
  border: 1px solid red;
}
/* 此時div的寬是 width + padding + border = (300 + 20 + 2)px */

如果我們想讓盒子div的寬為300px，我們需要計算：300px - 22px = 278px
改為：

div {
  padding: 0
 
 10px;
  width: 278px;
  border: 1px solid red;
}
/* 此時div的寬是 width + padding + border = (278 + 20 + 2)px */

不過這種情況下，box-sizing: border-box可以免除計算，讓內容寬度自動更具padding和border的設定值進行增減：

div {
  box-sizing: border-box;
  padding: 0 10px;
  width: 300px;
  border: 1px solid red;
}
/* div盒子的寬度就是300px，內容會是278px */
/* 建議設定overflow: auto 因為padding值過大會使內容超出div盒子外 */