關於 Box Model（區塊模型）

在我們在討論 CSS 寬度時，不得不提到關於 Box Model 的議題。當你設定了元素的寬度，實際顯示的元素卻能夠超出你的設定：因為元素的邊框（margin）和內距（padding）會撐開元素。看看下面的例子，我們設定了兩個樣式，這兩個樣式擁有相同寬度設定，但最後元素顯示的實際寬度卻不太一樣。

.simple {
  width: 500px;
  margin: 20px auto;
}

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border-width: 10px;
}

以前的人，大多人的解決方法都是靠數學運算，也就是負責撰寫 CSS 的人通常會設定比他實際想要得寬度還小一些，然後減去已知的內距和邊框的寬度。感謝主，你現在不需要再這麼做了...