21.3　内补丁实例

内补丁用padding表示，表示对象的内部距离值，属性为复合属性，该复合属性由顶端内补丁padding-top、右端内补丁padding-right、下端内补丁padding-bottom和左端内补丁padding-left组成，不管是复合属性还是表示方位的属性，所接的值都是一样的，即接数值表示内补丁的距离值，数值越大，距离就越远。

在实际应用中，主要在层对象中设置内补丁，为了体现层边框与文本的距离值，即设置该层的内补丁，这样就表示层边框与文本间的一定距离的间隔，这间隔就是内补丁的距离值。本实例中演示内补丁用法，通过步骤来说明从单属性到复合属性的用法，请读者注意各代码的作用和区别。

21.3.1　设置顶部内补丁

从内补丁的顶部入手，设置单独顶部的内补丁值。顶部的内补丁设置并不影响其他方面的内补丁，因为顶部内补丁padding-top只对顶部起作用。

在输入好网页基本语句后，在网页内部即＜head＞＜/head＞中插入样式内容，定好各个层和样式文件。代码21.6表示实例的顶部内补丁。

代码21.6　顶部内补丁实例

—————————————文件名：内补丁实例手把手.html—————————————

01 ＜html＞

02 ＜head＞

03 ＜title＞内补丁padding实例＜/title＞

04 ＜style type="text/css"＞

05 /设置层标记的样式/

06 div

07 {

08 /设置层的边框/

09 border：1px solid red；

10 width：200px；

11 /设置层标记的外补丁/

12 margin-top：5px；

13 }

14 #p1

15 {

16 /设置内补丁值为20像素/

17 padding-top：20px；

18 /设置高度和背景颜色/

19 height：20px；

20 background：blue；

21 }

22 #pp1

23 {

24 /设置背景颜色和高度/

25 background：orange；

26 height：30px；

27 }

28 ＜/style＞

29 ＜/head＞

30 ＜body＞

31 ＜div id="p1"＞

32 ＜div id="pp1"＞padding-top设置＜/div＞

33 ＜/div＞

34 ＜/body＞

35 ＜/html＞

【代码解析】代码第22～27行设置了层p1包含子层pp1，且容器层的背景颜色为blue（代码第20行），而子层的背景颜色为orange（代码第25行），但在容器层中设置的顶端内补丁为20像素（代码第17行），从所展现的效果可以看出，顶部出现的背景刚好是padding-top设置的值，如图21.6所示。

图　21.6　设置padding-top