3.6 盒子在标准流中的定位原则

如果要精确地控制盒子的位置，就必须对margin有更深入的了解。padding只存在于一个盒子内部。所以通常它不会涉及与其他盒子之间的关系和相互影响的问题。margin则用于调整不同的盒子之间的位置关系，因此必须要对margin在不同情况下的性质有非常深入的了解。

一、实验1——行内元素之间的水平margin

这里来看两个块并排的情况，如图1所示。

图1 行内元素之间的margin

当两个行内元素紧邻时，它们之间的距离为第1个元素的margin-right加上第2个元素的margin-left，代码如下所示，示例文件位于网页学习网CSS资源“第3章\06.btm”。

<html>
<head>
<title>网页学习网——两个行内元素的margin</title>
<style type="text/css">
span{
background-color:#a2d2ff;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding:10px;
}
span.left{
margin-right:30px;
background-color:#a9d6ff;
}
span.right{
margin-left:40px;
background-color:#eeb0b0;
}
</style>
</head>
<body>
<span class="left">行内元素1</span><span class="right">行内元素2</span>
</body>
</html>

执行结果如图2所示，可以看到两个块之间的距离为30+40=70px。

图2 行内元素之间的margin

二、实验2——块级元素之间的竖直margin

通过上面的实验了解了行内元素的情况，但如果不是行内元素，而是竖直排列的块级元素，情况就会有所不同。两个块级元素之间的距离不是margin-bottom与margin-top的总和，而是两者中的较大者，如图3所示。这个现象称为margin的“塌陷”现象，意思是说较小的margin塌陷到了较大的margin中。lodidance.com

图3 块元素之间的margln

这里看一个实验案例，代码如下，示例文件位于网页学习网CSS资源“第3章\07.htm”。

<html>
<head>
<title>网页学习网——两个块级元素的margin</title>
<style type="text/css">
<!--
div{
background-color:#a2d2ff;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding:10px;
}
-->
</style>
</head>
<body>
<div style="margin-bottom:50px;">块元素1</div>
<div style="margin-top:30px;">块元素2</div>
</body>
</html>

执行结果如图4所示。倘若将块元素2的margin-top修改为40px，就会发现执行结果没有任何的变化。若再修改其值为60px，就会发现块元素2向下移动了10个像素。

图4 块元素之间的margln

经验：margin-top和margin-bottom的这些特点在实际制作网页时要特别的注意，否则常常会被增加了margin-top或者margin-botlom值时发现块“没有移动”的假象所迷惑。

三、实验3-嵌套盒子之间的margin

除了上面提到的行内元素间隔和块级元素间隔这两种关系外，还有一种位置关系．它的margin值对CSS排版也有重要的作用，这就是父子关系。当一个<div>块包含在另一个<div>块中时，便形成了典型的父子关系。其中子块的margin将以父块的content为参考，如图5所示。

图5 父子块的margin

这里有一个实验案例，代码如下，示例文件位于网页学习网CSS资源“第3章\08.htm”。

<head>
<title>网页学习网—父子块的margin</title>
<style type="text/css">
<!--
div.father{ /* 父div */
background-color:#fffebb;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding:10px;
border:1px solid #000000;
}
div.son{ /* 子div */
background-color:#a2d2ff;
margin-top:30px;
margin-bottom:0px;
padding:15px;
border:1px dashed #004993;
}
-->
</style>
</head>
<body>
<div class="father">
<div class="son">子div</div>
</div>
</body>

执行的结果如图6所示。可以看到子div距离父div上边为40px(30px margin+l0px padding)，其余3条边都是padding的l0px。

图6 父子块的margin

另外需要注意IE与Firefox在margin的细节处理上有所区别。倘若设定了父元素的高度height值，如果此时子元素的高度超过了浚height值，二者的显示结果就完全不同。下面进行实验，编写如下代码，示例文件位于网页学习网CSS资源“第3章\09.htm”。

<head>
<title>网页学习网—设置父块的高度</title>
<style type="text/css">
div.father{ /* 父div */
background-color:#fffebb;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding:10px;
border:1px solid #000000;
height:40px; /* 设置父div的高度 */
}
div.son{ /* 子div */
background-color:#a2d2ff;
margin-top:30px; margin-bottom:0px;
padding:15px;
border:1px dashed #004993;
}
</style>
</head>
<body>
<div class="father">
<div class="son">子div</div>
</div>
</body>

上面代码中设定的父div的高度值小于子块的高度加上margin的值，此时IE浏览器会自动扩大，保持子元素的margin-bottom的空间以及父元素自身的padding-bottom。而Firefox就不会，它会保证父元素的height高度的完全吻合，而这时子元素将超过父元素的范围，如图7所示。lodidance.com

图7 IE与Firefox对待父height的不同处理

从CSS的标准规范来说，IE的这种处理方法是不合规范的。它这种方式，本应该由min-height（最小高度）属性承担。

CSS规范中有4个相关属性min-height、max-heght、min-width、max-width．分别用于设置最大、最小宽度和高度，IE没有实现对这4个属性的支持，而Firefox可以非常好地支持它们。本教程后面的复杂案例中还会用到相关的内容。

四、实验4——将margin设置为负值

从CSS的标准规范来说，IE的这种处理方法是不合规范的。它这种方式，本应该由min-height（最小高度）属性承担。

上面提及margin的时候，它的值都是正数。其实margin的值也可以设置为负数，而且有关的巧妙运用方法也非常多，在后面的章节中都会陆续体现出来。这里先分析margin设为负数时产生的排版效果。

当margin设为负数时，会使被设为负数的块向相反的方向移动，甚至覆盖在另外的块上。在前面例子的基础上，编写代码如下，示例文件位于网页学习网CSS资源“第3章\10.htm”。

<head>
<title>网页学习网—margin设置为负数</title>
<style type="text/css">
span{
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding:10px;
border:1px dashed #000000;
}
span.left{
margin-right:30px;
background-color:#a9d6ff;
}
span.right{
margin-left:-53px; /* 设置为负数 */
background-color:#eeb0b0;
}
</style>
</head>
<body>
<span class="left">行内元素1</span><span class="right">行内元素2</span>
</body>

执行效果如图8所示，右边的块移动到了左边的块上方，形成了重叠的位置关系。

图8 margin设置为负数

当块之间是父子关系时，通过设置子块的margin参数为负数，可以将子块从父块中“分离”出来。关于它的应用在后面的章节中还会有更详细的介绍。

点击下载第1~7章CSS教程资源返回《CSS教程布局之道》教程列表

编辑：网页学习网

本文地址:http://www.lodidance.com/css/jc/671.html