CSS 盒模型（box-model）

大家都是盒子。

盒子的構成

一個盒子是由四個元素來組成的：

• content
• padding
• border
• margin（這個不用管，他就是外間距，對盒子本身沒有太大影響）

很常發生的問題

假設你有個盒子設定成：

.box {
  width: 200px;
  height: 100px;
}

你可能會以為盒子寬高就是 200 x 100：

可是如果現在加上 padding 跟 border，就跟你想的不一樣了：

.box {
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 5px solid black;
}

現在盒子的寬高不是 200 x 100 了，因為 padding 跟 border 會改變盒子的大小，可以想成是「從盒子裡往外加出去」。

因此盒子的寬高是：230 x 130：

• 寬 = 200 + 20 + 10 = 230
• 高 = 100 + 20 + 10 = 130

所以如果你希望盒子的寬高是 200 x 100，你得改成這樣設定：

.box {
  /* 200 - 20 - 10 */
  width: 170px;
  /* 100 - 20 - 10 */
  height: 70px;
  padding: 10px;
  border: 5px solid black;
}

解決惱人的計算問題 box-sizing

為了解決每次都要計算 border 跟 padding 的問題，你可以用 box-sizing 來改變盒子的計算方式：

• content-box 只計算到 content
• border-box 把 border 跟 padding 包含進來

簡單來說只要你設定成 border-box，就不用再去算 padding 跟 border ，它會自動幫你計算好。

.box {
  box-sizing: border-box;
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 5px solid black;
}

這樣盒子的尺寸永遠都會是 200 x 100，再也不用擔心 padding 跟 border。