六、 空白边叠加
margin属性用于设置元素与周边元素之间的间距(也叫空白边),当相邻的两个元素都设置了margin属性时,这两个元素之间的空白边就会发生叠加,叠加的结果是两者之间的空白边大小等于这两个元素中margin属性较大者的margin值。
现在通过几个例子来看看空白边叠加的效果。
1
<div id="div1">
Div1
</div>
<div id="div2">
Div2
</div>
2
这里在页面上放置了两个div,div1上面和div2下面各放置1个字符,这主要是用来看看为div设置的margin属性时具体的空白边大小,现在为div指定样式:
div {
padding:0px;
margin:50px 0px;
background-color:blue;
}
结果两个div之间的空白边大小为50px:
当元素中没有内容时,这时元素的上边距和下边距自己也会发生叠加,看看下面的HTML代码,由于div中没有任何内容,结果1和2两个字符之间的距离仅为50px,因为上下边距发生了叠加:
1
<div id="div1">
</div>
2
当一个元素嵌套在另一个元素中时,两个元素的空白边也会发生叠加(假设两个元素的padding和border都为0px):
1
<div id="div1">
<div>
dd
</div>
</div>
七、 框模型
HTML中任何元素都被看做是一个矩形框,这个矩形框由内容、内边距、边框和外边距四个部分组成:
内容区与边框之间的空白叫做内边距,当为元素设置背景时,背景将应用于内容区和内边距,而外边距则用于设置元素之间的间隔大小。一个元素的大小应该是:width+左右padding+左右boder大小+左右margin的总和。例如
div{
margin:10px;
padding:20px;
border:5px;
width:50px;
}
这时div的最终宽度为:50px+2*20px+2*10px+2*5px=120px。
目前FF和IE7是按照上面的规范来的,但是IE6及其以下版本都不是按照这种规范来计算元素的大小。IE6认为width包含了padding和内容区的大小,还是按照上面的div样式来计算,IE6中div的最终宽度为:50px+2*10px=70px。