如何理解margin與padding呀，我們首先可以想象一下我們手裡拿了一個鑽戒要向女朋友求婚，一般求婚的時候鑽戒都是在盒子裡放著呢，我們要有盒子的概念，鑽戒一般都放在盒子的中央，沒有哪家的鑽戒是把盒子佔的滿滿的，我們的鑽戒就放在盒子的中央，佔了很小的一塊麵積，其它的地方都是有填充物的，我們可以把這個填充物簡單的理解為padding也就是鑽戒距離盒子內邊緣的距離，這時候我們想把鑽戒放在桌子上，放在桌子的什麼位置呢，左上角，右上角，還是中間，我們姑且把他放在中間把，那麼我們這個鑽戒盒子距離桌子邊緣的距離就是margin，那麼很簡單我們那個鑽戒的盒子就是我們所說的border。

通過上面的圖片我們就可以很直觀的看出margin與padding的區別。

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

1、指定一個值時 該值指定四個邊到父內邊距的距離

margin: 100px;

2、指定兩個值時 第一個值指定上下 第二個指定左右

margin: 100px 20px;

3、指定三個值時第一個指定上邊、第二個指定左右兩邊、 第三個指定下邊

margin: 100px 20px 10px;
 

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

margin: 100px 20px 10px 50px;

padding屬性設定一個元素的內邊距，padding 區域指一個元素的內容和其邊界之間的空間，該屬性不能為負值。四個外邊距屬性設定分別是： padding-top， padding-right， padding-bottom 和 padding-left

1、指定一個值時 該值指定內容到四個邊的內邊距

padding: 50px;

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

padding: 50px 20px;

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

padding: 50px 20px 10px;

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

padding: 50px 20px 10px 5px;

以上的樣式設定了這個控制元件的寬度為200px、高度為200px，在改變margin和padding時內容區的大小是不變的

轉自：https://www.jianshu.com/p/73deb2ae7992