什麼是 Box Model？

在網頁世界裡，每個元素（不管是文字、按鈕、圖片）都可以想像成一個「盒子」。這個盒子有四層，就像洋蔥一樣，一層包著一層。

從內到外的順序是：

1. Content（內容）
   你真正看到的東西，像是文字、圖片或表格內容。

2. Padding（內距）
   內容和邊框之間的空間，像是給內容一點呼吸空間。

3. Border（邊框）
   包圍內容與內距的框線，可以設顏色、粗細、樣式。

4. Margin（外距）
   盒子與盒子之間的距離，讓它不會貼得太近。

舉個例子
假設你有一個按鈕：

HTML
<button>送出</button>

CSS 可能長這樣：

CSS
button {
  width: 100px;        /* 內容寬度 */
  padding: 10px;       /* 內距 */
  border: 2px solid #333; /* 邊框 */
  margin: 20px;        /* 外距 */
}

那這個按鈕實際佔的寬度是多少？
計算公式（預設 box-sizing: content-box 情況下）：

總寬度 = content + padding 左右 + border 左右 + margin 左右
= 100 + (102) + (22) + (20*2) = 164px

小陷阱：為什麼我的寬度怪怪的？

很多初學者會疑惑：「我明明設 width: 100px，結果整個按鈕變胖了！」
這是因為 width 預設只算 內容寬度，不包含 padding 和 border。

解決方法是使用：

CSS
box-sizing: border-box;

這樣 width 就會包含 padding 和 border，計算更直覺。

生活比喻

想像你要包禮物：

-Content = 禮物本體

-Padding = 緩衝紙（保護禮物）

-Border = 包裝紙

-Margin = 禮物和旁邊其他禮物之間的空間

結論

Box Model 是前端的基本功，理解它能幫你準確控制排版與間距，不會再因為元素大小亂跑而抓狂。下次調整 CSS 時，不妨先想想這個「洋蔥四層」，就能更精準地掌握設計。