今天畫個醜醜的圖片來介紹內邊距(padding) 邊框(border) 外邊距(margin)

這張圖 把紅色框起來的部分當作內容物 通常是文字
那麼黑色框起來的部分就把內容物這個容器給框起來 所以黑框就是邊框
紅色的箭頭就是內邊距 他是指邊框到內容物的距離
黑色的箭頭就是外邊界 他是指邊框到周圍環境的距離

有了概念之後就可以懂它的語法了

padding

• padding-top (上留白)
• padding-right (右留白)
• padding-bottom (下留白)
• padding-left (左留白)

margin

• margin-top (上邊界)
• margin-right (右邊界)
• margin-bottom (下邊界)
• margin-left (左邊界)

它們可以使用的距離單位可以使用長度(em、px、pt等)、百分比(%)、以及自動分配(auto)

padding和margin也可以有便利一點的寫法來給他距離
像是
padding: 25px 50px; "上下 左右"
padding: 25px 50px 25px; "上 左右 下"
padding: 25px 50px 50px 25px; "上 右 下 左"
記下起來這些簡寫可以省略一些冗長的程式碼