元素框的內(nèi)邊距在邊框和內(nèi)容區(qū)之間。亳不奇怪，控制這個(gè)區(qū)的最簡(jiǎn)單的屬性為padding。

padding

值：[<length>丨<percentage>]{1,4}1 inherit

初始值：對(duì)于簡(jiǎn)寫元素未定義

應(yīng)用于：所有元素

繼承性：無(wú)

百分?jǐn)?shù)：相對(duì)于包含塊的width

計(jì)算值：見單個(gè)屬性（padding-top等）

說(shuō)明：內(nèi)邊距絕對(duì)不能為負(fù)

可以看到，這個(gè)屬性接受任何長(zhǎng)度值或某個(gè)百分?jǐn)?shù)值。所以，如果網(wǎng)站建設(shè)人員希望所有h1元素的各邊都有10像素的內(nèi)邊距，這很容易：

h1{padding:10px;background-color:silver;}

另一方面，網(wǎng)站建設(shè)人員可能希望h1元素的內(nèi)邊距不均勻，而h2元素有規(guī)則的內(nèi)邊距：

h1{padding:lOpx 0.25em 3ex 3cm;}/*uneven padding*/

h2{padding:0.5em 2em;}/*values replicate to Che bottom and left sides*/

不過(guò)，如果只增加內(nèi)邊距，要真正看到所設(shè)置的內(nèi)邊距可能有些困難，所以下面加上一個(gè)背景色：

h1{padding:10px 0.25em 3ex 3cm;background:gray:}

h2{padding:0.5em 2em;background:silver;}

元素的背景延伸到其內(nèi)邊距。前面討論過(guò)，它還會(huì)延伸到邊框的外邊界，不過(guò)背景到達(dá)邊框之前必須先經(jīng)過(guò)內(nèi)邊距。

默認(rèn)地，元素沒(méi)有內(nèi)邊距。例如，段落之間的間隔傳統(tǒng)上只由外邊距保證。如果沒(méi)有內(nèi)邊距，元素的邊框會(huì)與元素本身的內(nèi)容相當(dāng)接近。因此，網(wǎng)頁(yè)設(shè)計(jì)在元素上放邊框時(shí)，同時(shí)增加內(nèi)邊距通常是一個(gè)好主意。

即使沒(méi)有使用邊框，內(nèi)邊距也能以特有的方式起作用。考慮以下規(guī)則：

p{margin:1em 0;padding:1em 0;}

p.one,p.three{background:gray;}

p.two,p.four{background:silver;}

p.three,p.four{margin:0;}

在這里，所有4個(gè)段落都有1em的上下內(nèi)邊距，而且其中兩個(gè)還有1em的上下外邊距。

前兩段有內(nèi)邊距，由于外邊距合并，它們之間只間隔1em。第二段和第三段也有1em的間隔，這是第二段的下外邊距帶來(lái)的。第三段和第四段之間沒(méi)有間隔，因?yàn)樗鼈儧](méi)有外邊距。不過(guò)，請(qǐng)注意后兩段內(nèi)容區(qū)之間的距離：這里相距2em，因?yàn)閮?nèi)邊距不合并，不同的背景色顯示出各段落從哪里開始到哪里結(jié)束。

因此，可以使用內(nèi)邊距來(lái)分隔元素的內(nèi)容區(qū)，這種做法可能比使用外邊距的做法更困難，不過(guò)內(nèi)邊距也不是沒(méi)有價(jià)值。例如，要讓段落與內(nèi)邊距之間有傳統(tǒng)的“一個(gè)空行”的間隔，必須寫作：

p{margin:0;padding:0.5em 0;}

各段落的上下內(nèi)邊距（0.5em）將前后相接，構(gòu)成總共1em的間隔。為什么要這么做呢？因?yàn)檫@樣一來(lái)，如果設(shè)計(jì)人員愿意就可以在段落之間插入分隔邊框，而各邊的邊框在外觀上會(huì)構(gòu)成一條實(shí)線。這些效果見圖8-41所示：

p{margin:0;padding:0.5em 0;border-bottom:1px solid gray;border-left:3px double black;}

百分?jǐn)?shù)值和內(nèi)邊距

前面提到過(guò)，可以為元素的內(nèi)邊距設(shè)置百分?jǐn)?shù)值。像外邊距一樣，百分?jǐn)?shù)值要相對(duì)于其父元素的width計(jì)算，所以如果父元素的width改變，它們也會(huì)改變。例如，假設(shè)有以下規(guī)則。如圖8-42所示：

P{padding:10%;background-color:silver;}

<div style="width:200px;

<p>This paragraph is contained within a DIV that has a width of 200 pixels,so its padding will be 10%of the width of the paragraph's.parent element.Given the declared width of 200 pixels,the padding will be 20 pixels on all sides.</p>

</div>

<div style="width:100px;">

<p>This paragraph is contained within a DIV with a width of 100 pixels,so its padding will still be 10%of the width of the paragraph's parent.There will,therefore,be half as much padding on this paragraph as that on the first paragraph.</p>

</div>

注意，網(wǎng)頁(yè)設(shè)計(jì)中的上下內(nèi)邊距與左右內(nèi)邊距一致，也就是說(shuō)，上下內(nèi)邊距的百分?jǐn)?shù)會(huì)相對(duì)于父元素寬度計(jì)算，而不是相對(duì)于高度。當(dāng)然，這在前面已經(jīng)見過(guò)（如果你忘了，可以提醒一下，我們?cè)凇巴膺吘唷币还?jié)中討論過(guò)這個(gè)問(wèn)題），不過(guò)還是有必要再回顧一下，看看它是如何作用的。