關於盒模型的介紹可以參考文章：
前端基礎：CSS 盒模型（box model）. 什麼是 box model？ | by Hugh’s Program learning | Medium
CSS 基础框盒模型介绍 - CSS（层叠样式表） | MDN
最一開始學習網頁排版時，常常會忘記使用 devtool 來查看元素的空間，一直憑感覺設定，然後設定錯了就會被提醒善用開發者模式來看，後來隨著排版練習幾次，版型變稍微複雜後，使用 devtool 很容易隨時調整到自己想要的樣子，再將設定的樣式貼回編輯器中：D

從這個開發者模式截圖可以知道，這個 HTML 元素的寬和高是 300px、border 是 5px、margin 是 50px
需注意的是 padding 和 border 是包含在這個 HTML 元素的空間的，margin 可以說是此 HTML 元素與其他內容的間距，若了解此觀念就可以在排版時對於要使用 margin 或 padding 比較不疑惑
若對於 padding 和 margin 的觀念不太熟悉，可嘗試在 HTML 元素加上背景顏色來方便自己快速辨識是元素內外間距，自己覺得有效 XD

有個常見的問題是初學時會認為若這個 HTML 元素的寬和高都是 0，就不會有 border，需注意 margin / padding / border 本身都有佔空間，因此當元素本身沒有空間時，若有設定 margin / padding / border 元素就會有空間

若是元素本身沒有空間只有 border ，並將上下左右的 border 都設定不同顏色，就會發現每邊 border 會是一個梯形

<div class="box"></div>


.box {
  border-top: 50px solid #274c77;
  border-bottom: 50px solid #6096ba;
  border-left: 50px solid #a3cef1;
  border-right: 50px solid #8b8c89;
  margin: 50px;
}

參考資料：

前端基礎：CSS 盒模型（box model）. 什麼是 box model？ | by Hugh’s Program learning | Medium
CSS 基础框盒模型介绍 - CSS（层叠样式表） | MDN