這天草莓ㄧ如往常的在咖啡廳練習寫網頁。

「早安啊草莓，假日還這麼早來呀？」熊熊喝著咖啡。
「對啊，想要早點變得很厲害嘻嘻」草莓說。

感覺草莓也很努力呢，熊熊心想。

「熊熊呀，可以幫我看一下嗎？」
熊熊探過頭去看草莓的螢幕。

「我想要這兩個標籤之間多一些留白的空間，網頁上有辦法做到這件事嗎？」
「這當然沒有問題，不過在加上之前，有個叫做盒子模型的概念你要先理解喔！」熊熊說。

「什麼是盒子模型呀？」草莓問，感覺很好吃。
「草莓你太貪吃了。」

「網頁上的元素都有自己的內容大小對吧？但是除了本身的內容以外，為了增添排版上的可控性，其實也提供了幾個屬性讓我們使用。從最內層的內容 (content) 出發的話，會先遇到所謂的內距 (padding)，接下來是邊框 (border)，最後則是外距 (margin)。」熊熊解釋說。

「好像 ... 有點複雜耶？」草莓暈頭轉向。

「沒關係，我畫成圖你應該會比較容易理解～」熊熊在白板上迅速畫著。

「而且呀～其實現今瀏覽器都會很貼心地幫你自動計算好每個元素的盒子模型了，只要針對網頁上的元素，按下滑鼠右鍵，選擇 “檢測元素”，就可以打開網頁的開發者工具，滑到下方就會看到一張類似這樣的盒子圖。」

「瀏覽器好方便呀，可是 padding 和 margin 兩個差別在哪裡呢？」草莓繼續追問。

「一般來說的簡單區分，如果是單純想調整元素和邊框之間的距離，我們會使用 padding，但如果像是多個元素之間的距離調整，使用 margin 會較為合適喔！」熊熊說。

「喔喔！原來盒子是這麼一回事～」草莓說。
「草莓你哪來的盒子...」

明日待續～