CSS - margin、padding

CSS Box Model
是在 CSS 裡面，html 的每個元素都可被視作為一個盒子，然後可以針對這個盒子去做調整，請看以下圖片:

今天如果你margin跟padding都沒設定時，你的元素會是長這樣

當你加入了margin後，我們來看看發生了甚麼變化!!!
簡單來說margin就是一個是外邊距，與外層元素的間距。

Margin 用於控制元素與其周邊元素的間隔，可以設定為正數（增加與其他元素的距離）、負數（減少與其他元素的距離）或零（不留空隙）。

padding就是一個外邊距，元素邊界至主要內容的間距。

因為內距(padding)會向外擴展，所以添加外框等裝飾會改變元素的原始總高度和寬度。