我們?cè)趧傞_始接觸CSS的時(shí)候總是被margin和padding鬧的暈頭轉(zhuǎn)向，什么時(shí)候設(shè)置margin，什么時(shí)候設(shè)置padding，不是太清楚，設(shè)置了以后在界面上看到的效果也差不多呀。
如何理解margin與padding呀，我們首先可以想象一下我們手里拿了一個(gè)鉆戒要向女朋友求婚，一般求婚的時(shí)候鉆戒都是在盒子里放著呢，我們要有盒子的概念，鉆戒一般都放在盒子的中央，沒有哪家的鉆戒是把盒子占的滿滿的，我們的鉆戒就放在盒子的中央，占了很小的一塊面積，其它的地方都是有填充物的，我們可以把這個(gè)填充物簡(jiǎn)單的理解為padding也就是鉆戒距離盒子內(nèi)邊緣的距離，這時(shí)候我們想把鉆戒放在桌子上，放在桌子的什么位置呢，左上角，右上角，還是中間，我們姑且把他放在中間把，那么我們這個(gè)鉆戒盒子距離桌子邊緣的距離就是margin，那么很簡(jiǎn)單我們那個(gè)鉆戒的盒子就是我們所說(shuō)的border。
通過(guò)上面的圖片我們就可以很直觀的看出margin與padding的區(qū)別。
margin屬性可以為給定元素設(shè)置所有四個(gè)（上下左右）方向的外邊距屬性。四個(gè)外邊距屬性設(shè)置分別是： margin-top， margin-right， margin-bottom 和 margin-left 。指定的外邊距允許為負(fù)數(shù)。
1、指定一個(gè)值時(shí) 該值指定四個(gè)邊到父內(nèi)邊距的距離
margin: 100px;
2、指定兩個(gè)值時(shí) 第一個(gè)值指定上下 第二個(gè)指定左右
margin: 100px 20px;
3、指定三個(gè)值時(shí)第一個(gè)指定上邊、第二個(gè)指定左右兩邊、 第三個(gè)指定下邊
margin: 100px 20px 10px;
4、指定四個(gè)值時(shí)分別為上 右 下 左（順時(shí)針順序）
margin: 100px 20px 10px 50px;
padding屬性設(shè)置一個(gè)元素的內(nèi)邊距，padding 區(qū)域指一個(gè)元素的內(nèi)容和其邊界之間的空間，該屬性不能為負(fù)值。四個(gè)外邊距屬性設(shè)置分別是： padding-top， padding-right， padding-bottom 和 padding-left
1、指定一個(gè)值時(shí) 該值指定內(nèi)容到四個(gè)邊的內(nèi)邊距
padding: 50px;
2、指定兩個(gè)值時(shí) 第一個(gè)值指定內(nèi)容到上下兩邊的內(nèi)邊距 第二個(gè)指定內(nèi)容到左右兩邊的內(nèi)邊距
padding: 50px 20px;
3、指定三個(gè)值時(shí)第一個(gè)指定內(nèi)容到上邊的內(nèi)邊距.第二個(gè)指定內(nèi)容到左右兩邊 第三個(gè)指定內(nèi)容到下邊的距離
padding: 50px 20px 10px;
4、指定四個(gè)值時(shí)分別為上 右 下 左（順時(shí)針順序）
padding: 50px 20px 10px 5px;
以上的樣式設(shè)定了這個(gè)控件的寬度為200px、高度為200px，在改變margin和padding時(shí)內(nèi)容區(qū)的大小是不變的
