盒模型概念

所有的HTML元素就像是箱子一樣(有寬度高度)，並且具備以下六個屬性:

• 寬度width
• 高度height
• 內容content
• 邊框border
• 內距padding
• 邊界margin

Padding 內距設定

Padding是內距，有設定padding就會產生留白的距離
可以控制 HTML元素間的內部距離（例如文字或圖片與邊框的距離、一個區塊如 DIV 或 span 的內部距離）

1. 可以分別設定上下左右內距的距離
   padding-bottom
   padding-left
   padding-right
   padding-top

例如:

在還沒設定padding之前，可以看到文字內容會撐滿瀏覽器

在設定了padding之後

可以看到，文字內容向內推擠出了一些距離

2. 其他設定padding的方式
   除了用padding-bottom、padding-left、padding-right、padding-top來分別設定內距之外，
   還有以下方式可以設定

• padding : 10px 20px 10px 20px; (以順時鐘順序設定上右下左的padding大小)
• padding : 10px 20px; (第一個數值代表設定上下內距，第二個數值代表設定左右內距)
• padding : 10px; (設定上下左右內距都是10px)
• padding : 10px 20px 10px; (第一個數值代表設定上，第二個數值代表設定左右，第三個數值代表設定下)

參考資料: Padding

border 邊框設定

一樣可以上下左右分別設定邊框
但border還需要設定框線的粗細、線條樣式及顏色

例如:

參考資料: border

Margin 邊界設定

和Padding不同，是向外推擠產生邊界的距離
如果是行內元素，設定margin的上下距離不會產生效果。

例如:
在還沒設定margin之前，可以看到文字段落都擠在一起
利用margin-bottom 使文字段落向下推擠產生邊界距離

相關資料:Margin Collapse

Box-sizing

HTML元素的寬度和高度會包含padding和border

例如:

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
}

div1的實際寬度會等於 300px +左邊1px border + 右邊1px的border =302px
div1的實際高度會等於 100px +上面1px border + 下面1px的border =102px

.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
}

div2的實際寬度會等於 300px +左右兩邊padding+ 左右兩邊border=402px
div2的實際高度會等於 100px +上下兩邊padding + 上下兩邊border= 202px

box-sizing: border-box;

如果在HTML元素上有設定box-sizing: border-box; ，padding和border就不會被納入該元素的寬度與高度內，原本元素的寬度高度就會往內縮

.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}

參考資料: CSS Box Sizing

以上為個人學習筆記整理
若有錯誤，歡迎指正