元素框的內(nèi)邊距在邊框和內(nèi)容區(qū)之間。亳不奇怪,控制這個區(qū)的最簡單的屬性為padding。
padding
值:[<length>丨<percentage>]{1,4}1 inherit
初始值:對于簡寫元素未定義
應(yīng)用于:所有元素
繼承性:無
百分數(shù):相對于包含塊的width
計算值:見單個屬性(padding-top等)
說明:內(nèi)邊距絕對不能為負
可以看到,這個屬性接受任何長度值或某個百分數(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*/
不過,如果只增加內(nèi)邊距,要真正看到所設(shè)置的內(nèi)邊距可能有些困難,所以下面加上一個背景色:
h1{padding:10px 0.25em 3ex 3cm;background:gray:}
h2{padding:0.5em 2em;background:silver;}
元素的背景延伸到其內(nèi)邊距。前面討論過,它還會延伸到邊框的外邊界,不過背景到達邊框之前必須先經(jīng)過內(nèi)邊距。
默認地,元素沒有內(nèi)邊距。例如,段落之間的間隔傳統(tǒng)上只由外邊距保證。如果沒有內(nèi)邊距,元素的邊框會與元素本身的內(nèi)容相當接近。因此,網(wǎng)頁設(shè)計在元素上放邊框時,同時增加內(nè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個段落都有1em的上下內(nèi)邊距,而且其中兩個還有1em的上下外邊距。
前兩段有內(nèi)邊距,由于外邊距合并,它們之間只間隔1em。第二段和第三段也有1em的間隔,這是第二段的下外邊距帶來的。第三段和第四段之間沒有間隔,因為它們沒有外邊距。不過,請注意后兩段內(nèi)容區(qū)之間的距離:這里相距2em,因為內(nèi)邊距不合并,不同的背景色顯示出各段落從哪里開始到哪里結(jié)束。
因此,可以使用內(nèi)邊距來分隔元素的內(nèi)容區(qū),這種做法可能比使用外邊距的做法更困難,不過內(nèi)邊距也不是沒有價值。例如,要讓段落與內(nèi)邊距之間有傳統(tǒng)的“一個空行”的間隔,必須寫作:
p{margin:0;padding:0.5em 0;}
各段落的上下內(nèi)邊距(0.5em)將前后相接,構(gòu)成總共1em的間隔。為什么要這么做呢?因為這樣一來,如果設(shè)計人員愿意就可以在段落之間插入分隔邊框,而各邊的邊框在外觀上會構(gòu)成一條實線。這些效果見圖8-41所示:
p{margin:0;padding:0.5em 0;border-bottom:1px solid gray;border-left:3px double black;}
前面提到過,可以為元素的內(nèi)邊距設(shè)置百分數(shù)值。像外邊距一樣,百分數(shù)值要相對于其父元素的width計算,所以如果父元素的width改變,它們也會改變。例如,假設(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)頁設(shè)計中的上下內(nèi)邊距與左右內(nèi)邊距一致,也就是說,上下內(nèi)邊距的百分數(shù)會相對于父元素寬度計算,而不是相對于高度。當然,這在前面已經(jīng)見過(如果你忘了,可以提醒一下,我們在“外邊距”一節(jié)中討論過這個問題),不過還是有必要再回顧一下,看看它是如何作用的。