今天學盒模型，學了兩個最重要的元素：margin和padding。

盒模型是佈局中至關重要的一個東西，基本上只要掌握了盒模型，佈局就沒有大礙。而margin和padding作為盒模型裡面極其重要的兩個元素，弄懂這兩個東西，就基本上弄懂了盒模型，也基本上具備了快速佈局的能力。

盒模型如下圖：

• Margin - 邊界外的透明區域。
• Border - 邊框在填充和內容周圍。
• Padding - 內容周圍的透明區域。
• Content - 實際文字和影象。

從上圖可以知道，margin稱作外邊距，用來定義元素周圍的空間。

1、margin語法示例：

當然，這些屬性除了可以單個設定，它也可以一起設定。

2、padding語法示例

padding用於在設定頁面中一個元素內容到元素的邊緣(邊框) 之間的距離，也稱作留白。

它用於調整內容在容器中的關係、子元素在父元素中的關係。padding需要設定在父元素中。

padding的語法和margin類似，使用方法也一樣。只不過padding值是額外加在元素原有大小之上的，如想保證元素大小不變，需從元素寬或高上減掉後新增的padding屬性值 

從功能上來看，padding和margin很多時候的效果一樣，但他們兩個的使用還是有些區分的。

用margin：

1. 需要在border外新增空白時。
2. 空白處不需要父元素背景色時。

用padding：

1. 需要在border內側新增空白時。
2. 空白處需要父元素背景色時。

此外，margin和padding還有一個作用的區分：當你想要兩個相連的盒子之間的空白為35px，時，你可以設定第一個盒子的margin-bottom為34px，或者第二個盒子的margin-top為35px；你也可以分別設定第一個盒子的padding為15px，第二個盒子的padding為20px；

總而言之，margin時用來隔開元素的間距，而padding時用來隔開元素與內容。margin在佈局是用來分隔開各個元素，使其互不相干，而padding用於在元素和內容之間新增間隔。