1.我們來解析官方的margin是怎麼個說法

margin屬性可以為給定元素設定所有四個（上下左右）方向的外邊距屬性。四個外邊距屬性設定分別是： margin-top， margin-right， margin-bottom 和 margin-left 。指定的外邊距允許為負數。

初始值

每一個都是0

使用的範圍

包括所有的元素，但是對於table內中display型別為table-caption，table，inline-table的元素都是不起作用的，這裡要注意是table內的元素，比如說thead,tbody,tr,td,tfoot,td，這些，你在裡面用div這些東西，都是可以起作用的，所以注意了。

還有他也可以被用於::first-letter(這個以後會講)

百分比的用處

這是一個關鍵的東西，它是相對於包含它的塊的寬度進行處理的，為什麼要這麼設計呢，因為寬度一般都是可控的，你螢幕的寬度一定吧，而高度是隨著內容的增加而增多，所以需要以寬度為基準處理。

這個東西是最重要的。

取值

當你使用auto的時候，這個值就會被替換為適當的值，不需要你關心。

1. 只有一個值時，這個值會被指定給全部的四個邊

2. 兩個值時，第一個值被匹配給上和下, 第二個值被匹配給 左和右.

3. 三個值時，第一個值被匹配給上, 第二個值被匹配給 左和右

4. **第三個值被匹配給 下. 四個值時，會依次按 上、右、下、左 的順序匹配
   (即順時針順序).**

2.我們接著來解析官方的padding是怎麼個說法

padding屬性設定一個元素的內邊距，padding 區域指一個元素的內容和其邊界之間的空間，該屬性不能為負值。

初始值

都為0

使用的範圍

全部元素，除去display為table-row-group，table-header-group，table-footer-group,table-row，table-column-group和table-column。這裡要記住的是，display為這些的，而不是專指table內的元素

取值

1. 指定一個值時 該值指定四個邊的內邊距

2. 指定兩個值時 第一個值指定上下兩邊的內邊距 第二個指定左右兩邊的內邊距

3. 指定三個值時第一個指定上邊的內邊距.第二個指定左右兩邊 第三個指定下邊

4. 指定四個值時分別為上 右 下 左（順時針順序）

總結

有上述的我們可以知道margin和padding的百分比是相對於父親元素的寬度的，到這裡我們就基本知道了一個最基礎的觀念，行內元素中是不能放塊級元素的，因為它可以說沒有寬度（並不是真正的沒有，只是比喻）。

3.讓margin和padding遛起來

1. 實現正方形自適應

2. 實現兩欄自適應

3. 實現三欄自適應佈局，左右固定長度，中間自適應

…

下一篇將寫實現，你們自己可以先玩玩