11.3.4 内边距的设置
内边距（padding）类似于HTML中表格单元格的填充属性，即盒子边框和内容之间的距离。内边距（padding）和外边距（margin）很相似，都是不可见的盒子组成部分，只不过内边距（padding）和外边距（margin）之间夹着边框。在D:web目录下创建网页文件（XHTML1.0），命名为box_padding.htm，编写box_padding.htm文件代码如代码11.19所示。
代码11.19 内边距的设置：box_padding.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>内边距的设置</title>
<style type="text/css">
* {margin: 0px;}
#all{width:360px;
height:300px;
margin:0px auto;
padding:25px;
background-color:#ccc;}
#a,#b,#c,#d,#e,#f,#g{width:160px;
height:50px;
border:1px solid #000;
background-color:#eee;}
p{width:80px;
height:30px;
padding-top:15px;
background-color:#cc9;}
#a{padding-left:50px;}
#b{padding-top:50px;}
#c{padding-right:50px;}
#d{padding-bottom:50px;}
</style>
</head>
<body>
<p id="all">
<p id="a">
<p>a盒子</p>
</p>
<p id="b">
<p>b盒子</p>
</p>
<p id="c">
<p>c盒子</p>
</p>
<p id="d">
<p>d盒子</p>
</p>
</p>
</body>
</html>
为了更方便看到p的表现，笔者给外部p设置了#ccc背景色，并给内部p设置了#eee背景色，而p元素设置了#cc9背景色。在浏览器地址栏输入http://localhost/box_padding.htm，浏览效果如图11.22所示。
图11.22 内边距的设置
11.3.5 盒模型兼容问题
微软的IE 6.0以后的版本在浏览器内嵌了两种表现模式：标准模式和兼容模式。在标准模式中，浏览器根据W3C所定的规范来显示页面；而在兼容模式中，页面将以IE 5.0，甚至IE 4.0的显示页面的方式来表现，使以前的网页也能正常显示。这两种模式最大的问题就是盒模式的兼容问题，但是，IE在兼容模式下运行的盒模式依然在最新版本的IE 7.0保留着，一旦页面使用兼容模式浏览，IE 7.0将变成跟IE 5.0一样不兼容Web标准。
不仅IE浏览器，其他浏览器都有类似的多种解析模式，如Opera浏览器、FireFox浏览器等。使用浏览器不同的模式通过不同的DTD（文档类型声明）来实现，在早期的HTML页面制作中，html声明部分直接使用的：
