大道至簡

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. 當1個參數時，上-右-下-左的內邊距都是這個參數值；
3. 當2個參數時，第一個參數賦予上下，第二個參數賦予右左；
4. 當3個參數時，第一個參數賦予上，第二個參數賦予右左，第三個參數賦予下；
5. 當4個參數時，按第一條原則順序進行賦值。

創造即永恒，喝茶去……