CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。

例子：

 padding:內邊距，改變padding值觀察變化：

 border:邊框，改變border的值觀察變化：

 margin:外邊距，改變margin的值觀察變化：

 1.padding內邊距

• padding:屬性1，屬性2，屬性3，屬性4（上->右->下->左）
• padding:屬性1，屬性2，屬性3（上->左右->下）
• padding:屬性1，屬性2（上下->左右)
• padding:屬性1

2.border邊框

border:2px solid red;

• 邊框的粗細：border-width,可以使用指定長度，比如2px或0.1em,或者使用thick、medium(預設值)、thin
• 邊框的樣式：border-style

• • border-style: 屬性1，屬性2，屬性3，屬性4（上->右->下->左）
  • boder-style：屬性1，屬性2，屬性3（上->左右->下）
  • border-style：屬性1，屬性2（上下->左右）
  • border-style：屬性1（上下左右屬性相同）
• 邊框的顏色:可以直接指定顏色名稱（green）、指定RGB值（rgb(255,0,0))、16進位制值（#ff0000）

3.margin外邊距

• margin:屬性1，屬性2，屬性3，屬性4（上->右->下->左）
• margin:屬性1，屬性2，屬性3（上->左右->下）
• margin:屬性1，屬性2（上下->左右)
• margin:屬性1

特別：1.body總有一個預設的外邊距margin:8px

2.外邊距的妙用：居中元素

     margin: 0 auto

有使用要求：外層元素為塊元素，且塊元素有固定的寬度