代码11.17 外边距设置：box_margin.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:400px;
height:300px;
margin:0px auto;
background-color:#ccc;}
#a,#b,#c,#d,#e{width:150px;
height:50px;
text-align:center;
line-height:50px;
background-color:#fff;}
#a{margin-left:5px;
margin-bottom:20px;}
#b{margin-left:5px;
margin-right:5px;
margin-top:6px;
float:left;}
#c{margin-bottom:5px;}
#e{margin-left:5px;
margin-top:15px;}
</style>
</head>
<body>
<p id="all">
<p id="a">a盒子</p>
<p id="b">b盒子</p>
<p id="c">c盒子</p>
<p id="d">d盒子</p>
<p id="e">e盒子</p>
</p>
</body>
</html>
为了更方便看到p的表现，笔者给外部p设置了浅灰色背景色，并给内部p设置了白色背景色。在浏览器地址栏输入http://localhost/box_margin.htm，浏览效果如图11.19所示。这个示例非常典型，特别是b盒子、c盒子和d盒子之间的关系，笔者作关系图如图11.20所示。
图11.19 外边距设置 图11.20 外边距关系图
由于b盒子设置了向左浮动，所以紧随其后的c盒子自然“流”上来，和b盒子并列同一行，如图11.20所示，b盒子的高度为：
height margin-top=56（像素）
而c盒子的高度为：
height margin-bottom=55（像素）
可见，在这一行中c盒子下面留有1像素的空隙，正是d盒子利用这1像素的空间“流”上来，所以b盒子、c盒子和d盒子存在于同一行。
— 说明：读者可以尝试把b盒子的顶部边距设置为5像素，这时b盒子和c盒子高度一致。d盒子无法“流”上来，d盒子将自动换行，位于b盒子下面。
11.3.3 边框的样式设置
边框（border）作为盒模型的组成部分之一，其样式非常受重视。边框的CSS样式设置不但影响到盒子的尺寸，还影响到盒子的外观。边框（border）属性的值有3种，边框尺寸（像素）、边框类型和边框颜色（十六进制）。在D:web目录下创建网页文件（XHTML1.0），命名为box_border.htm，编写box_border.htm文件代码如代码11.18所示。
