大道至簡(jiǎn)
padding引入
接著上回的說(shuō)哈，通過(guò)引入css樣式，我們可以改變html標(biāo)簽的展示形態(tài)，現(xiàn)在有個(gè)需求：在div中寫(xiě)上一些文字，看代碼和效果圖1：
css：
div {
width: 300px;
height: 100px;
background-color: cyan;
}
html：
<div>衣帶漸寬終不悔，為伊“寫(xiě)”得人憔悴</div>
效果和我們的樣式是一樣的（上邊是正常顯示模式，下邊我用的開(kāi)發(fā)模式，主要是為了區(qū)分效果和顯示數(shù)值），既然運(yùn)行和效果都沒(méi)有問(wèn)題，那么茶哥兒也不會(huì)那么無(wú)聊閑扯的。大家發(fā)現(xiàn)了個(gè)問(wèn)題沒(méi)有，如果將我們的div當(dāng)做文本編輯區(qū)域，我們的文字的位置是不是很不合理呢？
我們來(lái)看一下常用的文本編輯器編寫(xiě)的效果（效果圖2）：
我們的word或者page來(lái)寫(xiě)東西的時(shí)候是不是都會(huì)有一個(gè)邊距啊，文字不是頂左頂上的（不和諧因素找到了），有同學(xué)可能會(huì)說(shuō)，茶哥兒，效果圖1不是有個(gè)變色邊距么，大家注意下啊，這個(gè)白色的邊距是body標(biāo)簽?zāi)J(rèn)有的，而且各個(gè)瀏覽器之間還是有差異的，以后我們需要對(duì)齊進(jìn)行reset（后邊的內(nèi)容，大家在此了解下即可，不要鉆牛角尖哈）。
再次強(qiáng)調(diào)一下，我們的文字是寫(xiě)在div里的，這個(gè)邊距是div相對(duì)于body來(lái)說(shuō)的，大家不要搞混了哈，我們現(xiàn)在研究的問(wèn)題是文字距離文本區(qū)域的間隔距離。
在這里我們就要引入本節(jié)的主角了padding，ok先修改代碼如下：
div {
width: 400px;
height: 100px;
background-color: cyan;
/*添加padding*/
padding: 20px;
}
我用的開(kāi)發(fā)模式，顏色上不好區(qū)分，大家原諒哈，但是還是很明顯的，效果圖3相對(duì)于效果圖1來(lái)說(shuō)文字已經(jīng)不頂左頂上了，而且我們發(fā)現(xiàn)效果圖3div有兩個(gè)顏色區(qū)域，里邊藍(lán)色的就是我們的width&height部分，外邊一圈是padding部分。
到這里我們可以給padding一個(gè)定義了，padding就是內(nèi)邊距，就是我們的文本顯示區(qū)域到邊界的距離。
padding用法
語(yǔ)法: padding:像素值1, 像素值2, 像素值3, 像素值4;
padding后邊最多可以跟四個(gè)像素值，也就是div的四周，那么當(dāng)后邊跟的參數(shù)值個(gè)數(shù)不同時(shí)，該如何賦值呢？請(qǐng)看下邊的總結(jié)：
- 不管有幾個(gè)參數(shù)值，賦值順序都由上開(kāi)始沿順時(shí)針?lè)较蜻M(jìn)行；
- 當(dāng)1個(gè)參數(shù)時(shí)，上-右-下-左的內(nèi)邊距都是這個(gè)參數(shù)值；
- 當(dāng)2個(gè)參數(shù)時(shí)，第一個(gè)參數(shù)賦予上下，第二個(gè)參數(shù)賦予右左；
- 當(dāng)3個(gè)參數(shù)時(shí)，第一個(gè)參數(shù)賦予上，第二個(gè)參數(shù)賦予右左，第三個(gè)參數(shù)賦予下；
- 當(dāng)4個(gè)參數(shù)時(shí)，按第一條原則順序進(jìn)行賦值。
創(chuàng)造即永恒，喝茶去……
