元素的外部空隙被称为盒模型的边界，也就是元素与元素之间的间距。边界是网页布局中另一个重要要素，恰当设置边界可以使网页布局疏朗有致，整体看起来优美得体。
定义边界
设置边界可以使用margin属性，例如：
- margin:2px;/*定义元素四边边界为2px*/
- margin:2px 4px;/*定义上下边界为2px，左右边界为4px*/
- margin:2px 4px 6px;/*定义上边界为2px，左右边界为4px，下边界为6px*/
- margin:2px 4px 6px 8px; /*定义上边界为2px，右边界为4px，下边界为6px，左边界为8px*/
- 也可以使用margin-top、margin-right、margin-bottom、margin-left属性独立设置上、右、下和左边界的大小，例如：
- margin-top:2px;/*定义元素上边界为2px*/
- margin-right:2em;/*定义右边界为元素字体的2倍*/
- margin-bottom:2%;/*定义下边界为父元素宽度的2%*/
- margin-left:auto; /*定义左边界为自动*/
margin可以使用任何长度单位，如像素、磅、英寸、厘米、em、百分比等。margin默认值为0，如果没有定义margin的值，则意味着元素没有边界。
在实际使用中，各种浏览器都会为一些元素预定义边界样式，如p、h1～6、ul等，在显示时浏览器也会自动显示一定的边界。因此一些元素虽然没有定义margin，但并不意味它们没有边界。
边界应用
网页居中
aotu是一个自动计算的值，这个值一般为0，也可以为其他值，这主要由具体浏览器来确定。
【示例1】auto有一个重要作用就是用来实现元素居中显示，下面示例演示了如何设计页面居中显示，效果如图11所示（test.html）。
<style type="text/css">
body { text-align:center; } /*在IE浏览器下实现居中显示*/
div#page {
margin:5px auto; /*在非IE浏览器下实现居中显示*/
width:910px;
height:363px;
background-image:url(images/1.png);
border:solid red 1px;}
</style>
<div id="page">模拟页面</div>
图11 居中显示效果
要实现CSS平行居中，首先应在父元素中定义text-align:center;，这个规则在IE早期版本浏览器中可以实现父元素内的所有内容，包括文本、行内元素和块状元素居中显示。但在其他浏览器中只能实现文本、行内元素居中显示。而要在标准浏览器中实现块状元素居中显示，解决方法就是为显示元素定义margin-right:auto;margin-left:auto;属性。
如果想用这种方法使整个页面居中，建议不要把所有模块都套在一个div元素里，可以根据上面示例CSS布局代码定义，然后为每个模块的包含框元素div定义margin-right:auto;margin-left:auto;就可以实现该元素居中显示。
在实际使用中，可能希望页面布局居中显示，但内部文本以左对齐，这时就需要为子元素定义text-align:left;属性，使其内部文本向左对齐。否则文本也会居中显示，显然这不是所希望的结果。
设计弹性页面
边界可以设置为百分比，百分比的取值是根据父元素宽度来计算的。使用百分比的好处能够使页面自适应窗口大小，并能够及时调整边界宽度。从这点考虑，选用百分比具有更大灵活性和更多使用技巧。但是，如果父元素的宽度发生变化，则边界宽度也会随之变化，整个版面可能会混乱，因此在综合布局时要慎重选择。不过在结构单纯、内容单一的布局中，适当使用会使页面更具人性化和多变效果。
【示例2】下面示例通过margin取值百分比定义弹性布局页面，效果如图12所示（test1.html）。
<style type="text/css">
#box {/*定义文本框属性*/
margin:2%; /*边界为body宽度的2%*/
padding:2%; /*补白为body宽度的2%*/
background:#CCCC33;}
#box #content { /* 定义文本框内文本段的属性 */
margin:4%; /* 边界为文本框宽度的4% */
line-height:1.8em; /* 定义行高为字体高度的18倍 */
font-size:12px; /* 定义字体大小 */
color:#003333; /* 定义字体颜色 */}
#box .center {/* 居中加粗文本 */
margin:4%; /* 边界为文本框宽度的4% */
text-align:center; /* 文本居中显示 */
font-weight:bold; /* 定义标题为粗体 */}
</style>
<div id="box">
<p class="center">将进酒</p>
<p class="center">李白</p>
<p id="content"> 君不见，黄河之水天上来，奔流到海不复回。<br />
君不见，高堂明镜悲白发，朝如青丝暮成雪。<br />
人生得意须尽欢，莫使金樽空对月！<br />
天生我材必有用，千金散尽还复来。<br />
烹羊宰牛且为乐，会须一饮三百杯！<br />
岑夫子，丹丘生，将进酒，君莫停！<br />
与君歌一曲，请君为我侧耳听！<br />
钟鼓馔玉不足贵，但愿长醉不愿醒！<br />
古来圣贤皆寂寞，惟有饮者留其名！<br />
陈王昔时宴平乐，斗酒十千恣欢谑。<br />
主人何为言少钱？径须沽取对君酌。<br />
五花马，千金裘，呼儿将出换美酒，与尔同消万古愁！ </p>
</div>
图12 弹性布局效果
在上面示例中，把所有边界都设置为百分比，这样当窗口发生变化时，显示内容也比较得体的成比例变化，不至于当窗口很小时，段落文本所占区域比例很大，当窗口很大时，段落文本所占区域比例又显小气。边界的随机应变使页面更显机灵。
调整栏目显示顺序
边界可以取负值，负值边界会给的设计带来更多创意，在网页布局中经常应用该技巧。
【示例3】下面示例模拟一个页面栏目，该栏目包括左右两个分栏，显示效果如图13所示（test2.html）。
<style type="text/css">
#wrap {/* 设置栏目包含框样式 */
width: 997px; /* 固定栏目总宽度 */
margin: 12px auto; /* 定义栏目居中显示 */}
#box1, #box2 {/* 设置左右模块共同属性 */
float: left; /* 向左浮动 */
height: 376px; /* 固定高度 */
background-position: center center; /* 背景居中 */
background-repeat: no-repeat;} /* 背景禁止平铺 */
#box1 {/* 定义左侧模块 */
width: 408px; /* 固定宽度 */
background-image: url(images/22.png);}/* 定义模拟子栏目效果图 */
#box2 {/* 定义右侧模块*/
width: 589px; /* 固定宽度 */
background-image: url(images/23.png);}/* 定义模拟子栏目效果图*/
</style>
<div id="wrap">
<div id="top"><img src="images/21.png" /></div>
<div id="box1"></div>
<div id="box2"></div>
</div>
图13 默认布局效果
这是一个很普通的两栏布局示意图，如果想把把左右两栏位置换一下，似乎很简单，只需要把HTML结构调整一下即可：
<div id="wrap"> <div id="top"><img src="images/21.png" /></div> <div id="box2"></div> <div id="box1"></div> </div>>
但是，当页面很复杂时，各种标签相互嵌套，代码成百上千行，这个看似简单的位置调换，可能需要牵一发动全身，麻烦不说，甚至破坏布局。
其实，只需要在CSS样式表中添加如下2个样式即可，则演示效果如图14所示（test3.html）。
#box1 {
margin-left:589px; /*左栏左边界取正值，值为右栏总宽度的和*/}
#box2 {
margin-left:-997px; /*右栏左边界取负值，值为左右栏总宽度的和*/}
图14 百分比取负值布局效果
在浮动布局时，当窗口缩小到一定宽度，如小于或等于左右模块宽度总和时，右边模块就会错行，通过边界取负值能够很好的解决这个问题，且各种浏览器都能够支持。
【示例4】可以使用边界取负值来对段落文本的行距进行一些补偿和修整，下面示例通过margin取负值来调整列表项目之间的行距，比较效果如图15所示（test4.html）。
<style type="text/css">
ul {
margin: 20px;
font-size: 16px;}
li { margin-top: -2px; /*压缩列表项之间的空隙*/ }
</style>
<ul>
<li>人生得意须尽欢，</li>
<li>莫使金樽空对月！</li>
<li>天生我材必有用，</li>
<li>千金散尽还复来。</li>
</ul>
压缩前
压缩后
图15 压缩前后比较效果
负边界对文本编排有影响，会间接缩短行距，影响段落的显示效果。另外，通过边界与补白的取负配合实现栏目背景色自动向下延伸，利用边界取负实现动态导航效果，通过边界取负隐藏不需要的内容等。
边界重叠
在网页排版中，通过margin调整栏目之间、对象之间的间距，但是元素之间的margin值会发生重叠，影响布局效果，使用时应该小心。简单概括如下：
- 边界重叠只发生在块状元素，且只是垂直相邻边界才会发生重叠。
- 边界重叠时，两个边界中最小的那边将被覆盖。
- 重叠只应用于边界，而补白和边框不会出现重叠。
边界重叠问题由于受各种结构关系的干扰，并非总是按预想的那样显示效果，下面结合示例分别进行讲解。
上边元素不浮动，下边元素浮动
【示例5】当上边元素不浮动，下边元素浮动时，上下元素的margin不会发生重叠（test.html）。
<style type="text/css">
/* [边界重叠1：上边元素不浮动，下边元素浮动] */
body {/* 清除页边距 */
margin: 0; /*适用IE*/
padding: 0; /*适用非IE*/}
div {/*设置上下元素共同属性*/
width: 100px;
height: 100px;
clear: both; /* 清除并列浮动显示 */
margin: 20px;
padding: 20px;}
#box1 {/* 定义上边元素不浮动 */ border: solid 20px red;}
#box2 {/* 定义下边元素浮动 */ float: left; border: solid 20px blue;}
</style>
<div id="box1">上边元素</div>
<div id="box2">下边元素</div>
上边元素浮动，下边元素不浮动
【示例6】与示例1相比，这是一个相反的布局，但渲染的效果却截然不同，如图16所示（test1.html）。
<style type="text/css">
body {/*清除页边距*/
margin:0; /*适用IE*/
padding:0; /*适用非IE*/}
div {/* 定义上下元素共同属性 */
width:100px;
height:100px;
clear:both;
margin:20px;
padding:20px;}
#box1 {/* 定义上边元素浮动 */
float:left;
border:solid 20px red;}
#box2 {/* 定义下边元素不浮动 */border:solid 20px blue;}
</style>
<div id="box1">上边元素</div>
<div id="box2">下边元素</div>
在IE中浏览，上下元素边界发生重叠现象。这与上边元素不浮动，下边元素浮动所讨论的结论是不同的，在其他浏览器中也具有相同的显示效果。
未重叠效果
重叠效果
图16 margin重叠比较效果
一个元素包含另一个元素
一个元素包含另一个元素从结构上讲属于嵌入或包含关系，它们不属于同一级别的相邻关系，外边的元素可以称为父元素，里面的元素可以称为子元素。
【示例7】下面示例设计当定义了父元素的边框或补白后，会看到子元素自动停靠在父元素内容框的左上角，如图17所示（test2.html）。如果内容框内前面包含其他对象，则自动向下分布。子元素的边界、边框和补白都被包含在内容框里。不管父、子元素是否或独立浮动显示，这种效果在不同浏览器中显示是相同的。
<style type="text/css">
body {margin: 0; /*适用IE*/padding: 0; /*适用非IE*/}/*清除页边距*/
div {/*定义父子元素共同属性*/
margin: 20px;
padding: 20px;
float: left;}
#box1 {/*定义父元素的属性*/
width: 500px;
height: 300px;
float: left;
background-image: url(images/1.jpg);
border: solid 20px red;}
#box2 {/*定义子元素的属性*/
width: 150px;
height: 150px;
float: left;
background-image: url(images/2.jpg);
border: solid 20px blue;}
</style>
<div id="box1">
<div id="box2">子元素</div>
</div>
图17 IE下演示效果
【示例8】如果取消父元素的边框和补白，并取消浮动显示，这时会发现子元素的边界越过父元素的边界，实现了叠加，其中较大边界会覆盖掉较小边界，如图18所示（test3.html）。
<style type="text/css">
body {margin:0; /*适用IE*/ padding:0; /*适用非IE*/}/*清除页边距*/
#box1{ /*不定义父元素的边框、补白，仅设置边界*/
margin:20px; /*父元素的边界为20px*/
background-image:url(images/1.jpg);}
#box2 { /*定义子元素的属性*/
margin:60px; /*子元素的边界为60px*/
border:solid 20px red;
padding:20px;
width:150px;
height:150px;
background-image:url(images/2.jpg);}
</style>
<div id="box1">
<div id="box2">子元素</div>
</div>
图18 包含元素之间的margin重叠现象
【提示】
边界重叠是网页布局中经常遇到的问题，也是布局中要重点考虑因素。边界重叠多发生在流动显示的块状元素的上下边界之间，但是如果对象是行内元素、绝对定位的元素，它们的边界一般是不会重叠的。浮动元素一般也不会发生重叠现象，但它的情况比较复杂，需要结合具体情况进行处理。
在布局中，最好设置上下元素的显示性质相同，例如，如果浮动，则都浮动；如果不浮动，则都不浮动。
如果实际需要，上下元素的显示属性（display）不相同，或者必须设置不同的显示性质。如上边元素浮动，下边元素不浮动，或者相反，此时要保证设置浮动元素的清除属性，即clear:both;。也可以单独设置下边元素的清除属性，但不能只设置上边元素为左右清除，否则对下边元素无效。因为该属性作用对象为后面解析的元素。
当上下元素显示性质不同时，请务必计算好边界问题，保证版面布局的统一协调。由于不同浏览器对此解释不一，不妨通过Hack技术来解决，即通过为不同浏览器设置不同的边界值来实现显示的统一。
行内元素边界
根据盒模型基本规则，任何元素都应有边界。关于行内元素的边界问题比较简单，它没有块状元素那样复杂多变。而且各种浏览器对行内元素的解析效果空前的统一。
与边框一样，行内元素的边界不会改变行高，行高只能由line-height、font-size和vertical-align属性来改变。与边框一样，行内元素的边界会挤占左右相邻文本的位置，因此使用边界可以调整相邻元素的距离，实现空格。另外，左右边界不会产生断行，边界被浏览器看作一个整体嵌入行内元素的两端。
【示例9】下面示例演示了当行内元素定义margin之后，它会对左右两侧的间距产生影响，如图19所示。
<style type="text/css">
p {/*影响行高的属性*/
line-height: 28px;
font-size: 16px;
vertical-align: middle;}
span {/*行内元素的边界*/
margin: 100px;
border: solid 1px blue;
color: red;}
</style>
<p> 五月草长莺飞，窗外的春天盛大而暧昧。这样的春日，适合捧一本丰沛的大书在阳光下闲览。<span>季羡林的《清塘荷韵》</span>，正是手边一种：清淡的素色封面，一株水墨荷花迎风而立，书内夹有同样的书签，季羡林的题款颇有古荷风姿。 </p>
图19 IE下预览效果