padding引入

接著上回的說哈，通過引入css樣式，我們可以改變html標(biāo)簽的展示形態(tài)，現(xiàn)在有個需求：在div中寫上一些文字，看代碼和效果圖1：

css：

div {

width: 300px;

height: 100px;

background-color: cyan;

}

html：<div>衣帶漸寬終不悔，為伊“寫”得人憔悴</div>

效果圖1.png

效果和我們的樣式是一樣的(上邊是正常顯示模式，下邊我用的開發(fā)模式，主要是為了區(qū)分效果和顯示數(shù)值)，既然運(yùn)行和效果都沒有問題，那么茶哥兒也不會那么無聊閑扯的。大家發(fā)現(xiàn)了個問題沒有，如果將我們的div當(dāng)做文本編輯區(qū)域，我們的文字的位置是不是很不合理呢?

我們來看一下常用的文本編輯器編寫的效果(效果圖2)：

效果圖2.png

我們的word或者page來寫東西的時候是不是都會有一個邊距啊，文字不是頂左頂上的(不和諧因素找到了)，有同學(xué)可能會說，茶哥兒，效果圖1不是有個變色邊距么，大家注意下啊，這個白色的邊距是body標(biāo)簽?zāi)J(rèn)有的，而且各個瀏覽器之間還是有差異的，以后我們需要對齊進(jìn)行reset(后邊的內(nèi)容，大家在此了解下即可，不要鉆牛角尖哈)。

再次強(qiáng)調(diào)一下，我們的文字是寫在div里的，這個邊距是div相對于body來說的，大家不要搞混了哈，我們現(xiàn)在研究的問題是文字距離文本區(qū)域的間隔距離。

在這里我們就要引入本節(jié)的主角了padding，ok先修改代碼如下：

div {? ? ? ? width: 400px;? ? ? ? height: 100px;? ? ? ? background-color: cyan;? ? ? ? /*添加padding*/

padding: 20px;

}

效果圖3.png

我用的開發(fā)模式，顏色上不好區(qū)分，大家原諒哈，但是還是很明顯的，效果圖3相對于效果圖1來說文字已經(jīng)不頂左頂上了，而且我們發(fā)現(xiàn)效果圖3div有兩個顏色區(qū)域，里邊藍(lán)色的就是我們的width&height部分，外邊一圈是padding部分。

到這里我們可以給padding一個定義了，padding就是內(nèi)邊距，就是我們的文本顯示區(qū)域到邊界的距離。

padding用法

語法: padding:像素值1, 像素值2, 像素值3, 像素值4;

padding后邊最多可以跟四個像素值，也就是div的四周，那么當(dāng)后邊跟的參數(shù)值個數(shù)不同時，該如何賦值呢?請看下邊的總結(jié)：

不管有幾個參數(shù)值，賦值順序都由上開始沿順時針方向進(jìn)行;

當(dāng)1個參數(shù)時，上-右-下-左的內(nèi)邊距都是這個參數(shù)值;

當(dāng)2個參數(shù)時，第一個參數(shù)賦予上下，第二個參數(shù)賦予右左;

當(dāng)3個參數(shù)時，第一個參數(shù)賦予上，第二個參數(shù)賦予右左，第三個參數(shù)賦予下;

當(dāng)4個參數(shù)時，按第一條原則順序進(jìn)行賦值。

創(chuàng)造即永恒，喝茶去……

原文鏈接：http://www.itdecent.cn/p/9f643bfe8a4b