padding引入
接著上回的說哈，通過引入css樣式，我們可以改變html標簽的展示形態，現在有個需求：在div中寫上一些文字，看代碼和效果圖1：
css：
div {
width: 300px;
height: 100px;
background-color: cyan;
}
html：<div>衣帶漸寬終不悔，為伊“寫”得人憔悴</div>
效果圖1.png
效果和我們的樣式是一樣的(上邊是正常顯示模式，下邊我用的開發模式，主要是為了區分效果和顯示數值)，既然運行和效果都沒有問題，那么茶哥兒也不會那么無聊閑扯的。大家發現了個問題沒有，如果將我們的div當做文本編輯區域，我們的文字的位置是不是很不合理呢?
我們來看一下常用的文本編輯器編寫的效果(效果圖2)：
效果圖2.png
我們的word或者page來寫東西的時候是不是都會有一個邊距啊，文字不是頂左頂上的(不和諧因素找到了)，有同學可能會說，茶哥兒，效果圖1不是有個變色邊距么，大家注意下啊，這個白色的邊距是body標簽默認有的，而且各個瀏覽器之間還是有差異的，以后我們需要對齊進行reset(后邊的內容，大家在此了解下即可，不要鉆牛角尖哈)。
再次強調一下，我們的文字是寫在div里的，這個邊距是div相對于body來說的，大家不要搞混了哈，我們現在研究的問題是文字距離文本區域的間隔距離。
在這里我們就要引入本節的主角了padding，ok先修改代碼如下：
div {? ? ? ? width: 400px;? ? ? ? height: 100px;? ? ? ? background-color: cyan;? ? ? ? /*添加padding*/
padding: 20px;
}
效果圖3.png
我用的開發模式，顏色上不好區分，大家原諒哈，但是還是很明顯的，效果圖3相對于效果圖1來說文字已經不頂左頂上了，而且我們發現效果圖3div有兩個顏色區域，里邊藍色的就是我們的width&height部分，外邊一圈是padding部分。
到這里我們可以給padding一個定義了，padding就是內邊距，就是我們的文本顯示區域到邊界的距離。
padding用法
語法: padding:像素值1, 像素值2, 像素值3, 像素值4;
padding后邊最多可以跟四個像素值，也就是div的四周，那么當后邊跟的參數值個數不同時，該如何賦值呢?請看下邊的總結：
不管有幾個參數值，賦值順序都由上開始沿順時針方向進行;
當1個參數時，上-右-下-左的內邊距都是這個參數值;
當2個參數時，第一個參數賦予上下，第二個參數賦予右左;
當3個參數時，第一個參數賦予上，第二個參數賦予右左，第三個參數賦予下;
當4個參數時，按第一條原則順序進行賦值。
創造即永恒，喝茶去……
原文鏈接：http://www.lxweimin.com/p/9f643bfe8a4b
