21.3.3　用复合属性padding设置内补丁

在前两个步骤中，分别用上右下左的方位表示了对象的内补丁用法，并展现效果，实际上，这四个方位的单独属性组合成一个复合属性，两者表达出的效果一样，而且所设置的代码会更少。

用复合属性padding表示上面的四边。如果用padding表示的话，只要一行代码就可以把四个边的效果表达出来，代码21.7表示用padding表达四种效果，在样式代码中加入如下CSS代码。

01 #p5

02 {

03 padding：20px；

04 background：blue；

05 }

06 #pp5

07 {

08 background：green；

09 height：50px；

10 }

【代码解析】在代码第3行中，表达了上、右、下、左的内补丁值为20像素。

同时，在HTML代码中，也要添加两个层，一个容器层和一个子层，通过上面的ID设置，达到padding的效果，HTML代码中的p5层如下所示。

＜div id="p5"＞

＜div id="pp5"＞padding设置，综合上面四个属性

＜/div＞

以上代码放入样式代码中，表示有两个新的ID，容器层用蓝色背景，子层用绿色背景，效果中出现的蓝色刚好是padding设置的内部补丁距离，效果如图21.8所示。

图　21.8　设置padding