元素框的内边距在边框和内容区之间。亳不奇怪，控制这个区的最简单的属性为padding。

padding

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

初始值：对于简写元素未定义

应用于：所有元素

继承性：无

百分数：相对于包含块的width

计算值：见单个属性（padding-top等）

说明：内边距绝对不能为负

可以看到，这个属性接受任何长度值或某个百分数值。所以，如果网站建设人员希望所有h1元素的各边都有10像素的内边距，这很容易：

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

另一方面，网站建设人员可能希望h1元素的内边距不均匀，而h2元素有规则的内边距：

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

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

不过，如果只增加内边距，要真正看到所设置的内边距可能有些困难，所以下面加上一个背景色：

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

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

元素的背景延伸到其内边距。前面讨论过，它还会延伸到边框的外边界，不过背景到达边框之前必须先经过内边距。

默认地，元素没有内边距。例如，段落之间的间隔传统上只由外边距保证。如果没有内边距，元素的边框会与元素本身的内容相当接近。因此，网页设计在元素上放边框时，同时增加内边距通常是一个好主意。

即使没有使用边框，内边距也能以特有的方式起作用。考虑以下规则：

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的上下内边距，而且其中两个还有1em的上下外边距。

前两段有内边距，由于外边距合并，它们之间只间隔1em。第二段和第三段也有1em的间隔，这是第二段的下外边距带来的。第三段和第四段之间没有间隔，因为它们没有外边距。不过，请注意后两段内容区之间的距离：这里相距2em，因为内边距不合并，不同的背景色显示出各段落从哪里开始到哪里结束。

因此，可以使用内边距来分隔元素的内容区，这种做法可能比使用外边距的做法更困难，不过内边距也不是没有价值。例如，要让段落与内边距之间有传统的“一个空行”的间隔，必须写作：

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

各段落的上下内边距（0.5em）将前后相接，构成总共1em的间隔。为什么要这么做呢？因为这样一来，如果设计人员愿意就可以在段落之间插入分隔边框，而各边的边框在外观上会构成一条实线。这些效果见图8-41所示：

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

百分数值和内边距

前面提到过，可以为元素的内边距设置百分数值。像外边距一样，百分数值要相对于其父元素的width计算，所以如果父元素的width改变，它们也会改变。例如，假设有以下规则。如图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>

注意，网页设计中的上下内边距与左右内边距一致，也就是说，上下内边距的百分数会相对于父元素宽度计算，而不是相对于高度。当然，这在前面已经见过（如果你忘了，可以提醒一下，我们在“外边距”一节中讨论过这个问题），不过还是有必要再回顾一下，看看它是如何作用的。