開始學習後覺得，在 CSS 的世界裡，每一個 Block 型態的標籤，本質上都是一個個「盒子」。
如果用美術做裝框設計或畫布排版的概念來比喻，一個完整的 Box Model 包含了四個基本層次：

Content（內容）：最核心的畫面或文字本身，我們可以設定它的 width（寬度）與 height（高度）。

Padding（內邊距）：內容與邊框之間的留白，幫裡面的內容留出呼吸空間。

Border（邊框）：盒子的實體外框。可以設定粗細、顏色與樣式（實線、虛線等）。

Margin（外邊距）：這個盒子跟「其他盒子」之間的距離。就像在藝廊掛畫時，兩幅畫框之間要保持的牆面留白，才不會全部擠在一起。

    width: 300px;
    height: 200px;
    padding: 20px;   /* 元件內部的間距 */
    border: 2px solid #333; /* 邊框 */
    margin: 30px;    /* 元件外面的間距 */
}

剛接觸時最容易把 Padding 和 Margin 搞混，我轉換思維用設計的邏輯去理解就變得還算直觀：

Padding 是「內部的推擠」（推開邊框，讓裡面的內容不貼邊）

Margin 是「外部的推擠」（推開別人，讓自己跟旁邊的元件保持安全距離）

搞懂這個觀念之後，看網頁畫面突然有了立體感，原來看似複雜的網頁，都是靠這一個個盒子透過間距堆疊與推擠出來的！

Day 19，解鎖了 Box Model 的四個層次。