我們在剛開始接觸CSS的時候總是被margin和padding鬧的暈頭轉向，什么時候設置margin，什么時候設置padding蓖柔，不是太清楚咨演，設置了以后在界面上看到的效果也差不多呀提茁。
如何理解margin與padding呀夸楣，我們首先可以想象一下我們手里拿了一個鉆戒要向女朋友求婚何乎，一般求婚的時候鉆戒都是在盒子里放著呢竹观，我們要有盒子的概念，鉆戒一般都放在盒子的中央遭赂，沒有哪家的鉆戒是把盒子占的滿滿的循诉，我們的鉆戒就放在盒子的中央，占了很小的一塊面積撇他，其它的地方都是有填充物的茄猫，我們可以把這個填充物簡單的理解為padding也就是鉆戒距離盒子內邊緣的距離，這時候我們想把鉆戒放在桌子上逆粹，放在桌子的什么位置呢募疮，左上角，右上角僻弹，還是中間阿浓，我們姑且把他放在中間把，那么我們這個鉆戒盒子距離桌子邊緣的距離就是margin蹋绽，那么很簡單我們那個鉆戒的盒子就是我們所說的border芭毙。
通過上面的圖片我們就可以很直觀的看出margin與padding的區(qū)別筋蓖。
margin屬性可以為給定元素設置所有四個（上下左右）方向的外邊距屬性。四個外邊距屬性設置分別是： margin-top退敦， margin-right粘咖， margin-bottom 和 margin-left 。指定的外邊距允許為負數(shù)侈百。
1瓮下、指定一個值時 該值指定四個邊到父內邊距的距離
margin: 100px;
2、指定兩個值時 第一個值指定上下 第二個指定左右
margin: 100px 20px;
3钝域、指定三個值時第一個指定上邊讽坏、第二個指定左右兩邊、 第三個指定下邊
margin: 100px 20px 10px;
4例证、指定四個值時分別為上 右 下 左（順時針順序）
margin: 100px 20px 10px 50px;
padding屬性設置一個元素的內邊距路呜，padding 區(qū)域指一個元素的內容和其邊界之間的空間，該屬性不能為負值织咧。四個外邊距屬性設置分別是： 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時內容區(qū)的大小是不變的
