空白边叠加
空白边叠加
当两个垂直空白边相遇时，他们将形成一个空白边。这个空白边的高度等于两个发生叠加的空白边的高度重的较大者。
这种相遇是要求没有分隔的，比如，边框。
ie6,ie7没有这种效果，而ie8,ff3.6都有这种效果。
可是<p>设置个margin-top:10px和margin-bottom:10px之后，每个段落之间都是10px间距。ie678ff3.6都产生一样的效果。
按道理讲ie6和7段落之间应该是20px啊，奇怪！
暂且搁这吧，以后尽量避免这种空白边叠加的情况，谁叫ie6和7还存于世上呢。
空白边叠加测试
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>空白边叠加</title>
6 <style type="text/css">
7 *{ margin:0px; padding:0px;}
8 #d1{ width:100px; height:100px; background-color:silver; margin-top:20px; border:1px solid black;}
9 #d2{ width:100px; height:20px; background-color:red; margin-top:20px;}
10 #d3{ width:100px; height:20px; background-color:green; margin-top:20px;}
11 #d4{ width:100px; height:100px; background-color:silver;}
12 #d5{ width:100px; height:40px; margin-top:40px; background-color:red;}
13 p{ margin-top:40px;margin-bottom:40px; display:block; border:1px solid black;}
14 </style>
15 </head>
16 <body>
17 <div id="d1">
18 <div id="d2">
19 <div id="d3"></div>
20 </div>
21 </div>
22
23 <div id="d4">
24 <div id="d5">
25
26 </div>
27 </div>
28 <p>放到沙发上</p>
29 <p>发生的</p>
30 <p>防盗锁</p>
31 </body>
32 </html>
33
posted on 2010-05-26 13:18 kingQueenyun 阅读(271) 评论(0) 编辑 收藏 举报
