大道至簡
padding引入
接著上回的說哈利耍，通過引入css樣式，我們可以改變html標(biāo)簽的展示形態(tài)，現(xiàn)在有個(gè)需求：在div中寫上一些文字隘梨，看代碼和效果圖1：
css：
div {
width: 300px;
height: 100px;
background-color: cyan;
}
html：
<div>衣帶漸寬終不悔程癌，為伊“寫”得人憔悴</div>
效果和我們的樣式是一樣的（上邊是正常顯示模式，下邊我用的開發(fā)模式轴猎，主要是為了區(qū)分效果和顯示數(shù)值）嵌莉，既然運(yùn)行和效果都沒有問題，那么茶哥兒也不會(huì)那么無聊閑扯的捻脖。大家發(fā)現(xiàn)了個(gè)問題沒有锐峭，如果將我們的div當(dāng)做文本編輯區(qū)域，我們的文字的位置是不是很不合理呢可婶？
我們來看一下常用的文本編輯器編寫的效果（效果圖2）：
我們的word或者page來寫東西的時(shí)候是不是都會(huì)有一個(gè)邊距啊沿癞，文字不是頂左頂上的（不和諧因素找到了），有同學(xué)可能會(huì)說矛渴，茶哥兒椎扬，效果圖1不是有個(gè)變色邊距么，大家注意下啊曙旭，這個(gè)白色的邊距是body標(biāo)簽?zāi)J(rèn)有的盗舰，而且各個(gè)瀏覽器之間還是有差異的，以后我們需要對齊進(jìn)行reset（后邊的內(nèi)容桂躏，大家在此了解下即可钻趋，不要鉆牛角尖哈）。
再次強(qiáng)調(diào)一下剂习，我們的文字是寫在div里的蛮位，這個(gè)邊距是div相對于body來說的，大家不要搞混了哈鳞绕，我們現(xiàn)在研究的問題是文字距離文本區(qū)域的間隔距離失仁。
在這里我們就要引入本節(jié)的主角了padding，ok先修改代碼如下：
div {
width: 400px;
height: 100px;
background-color: cyan;
/*添加padding*/
padding: 20px;
}
我用的開發(fā)模式们何，顏色上不好區(qū)分萄焦，大家原諒哈，但是還是很明顯的冤竹，效果圖3相對于效果圖1來說文字已經(jīng)不頂左頂上了拂封，而且我們發(fā)現(xiàn)效果圖3div有兩個(gè)顏色區(qū)域，里邊藍(lán)色的就是我們的width&height部分鹦蠕，外邊一圈是padding部分冒签。
到這里我們可以給padding一個(gè)定義了，padding就是內(nèi)邊距钟病，就是我們的文本顯示區(qū)域到邊界的距離萧恕。
padding用法
語法: padding:像素值1, 像素值2, 像素值3, 像素值4;
padding后邊最多可以跟四個(gè)像素值刚梭，也就是div的四周，那么當(dāng)后邊跟的參數(shù)值個(gè)數(shù)不同時(shí)票唆，該如何賦值呢朴读？請看下邊的總結(jié)：
- 不管有幾個(gè)參數(shù)值，賦值順序都由上開始沿順時(shí)針方向進(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)造即永恒般堆，喝茶去……
