网页块信息中间总是会产生空白！

今天看到经典一网友问题：不知为什么，它们三个中间总是有一条缝？
代码如下：

<style>
#left {
 width:5px;
 height:23px;
 background-color:#ff6600;
 float:left; /*浮动居左*/
 clear:left; /*不允许左侧存在浮动*/
 overflow:left; /*超出宽度部分隐藏*/
}
#right {
 width:5px;
 height:23px;
 background-color:#ff6600;
 float:right; /*浮动居左*/
 clear:right; /*不允许左侧存在浮动*/
 overflow:right; /*超出宽度部分隐藏*/
}
#m {
 /*width:794px; 调整菜单位置*/
 height:23px;
 background-color:#000000;
 margin:0px auto;
 /*padding-left:40px;*/
 display:block;line-height:22px;
}
style>
<div id=left>div>
<div id=right>div>
<div id=m>div>

一个朋友用margin:-3px的办法把问题解决了，但没有找到问题根本所在，偶看了下代码，感觉应该是块元素在作怪，因为楼主定义中间一块的属性display:block;在css中块元素总是会留出一定的空白，另外clear属性可能一会导致块元素的形成。
最后偶将代码改成这样（设定固定大小，去除块元素属性）：

<style>
#all{
  width:600px;
}

#left {
 width:5px;
 height:23px;
 background-color:#ff6600;
 float:left; /*浮动居左*/
}
#right {
 width:5px;
 height:23px;
 background-color:#ff6600;
 float:right; /*浮动居左*/
}
#m {
 height:23px;width:590px;
 background-color:#000000;
 line-height:22px;
 float:left
}
style>
<div id="all">
<div id=left>div>
<div id=right>div>
<div id=m>div>
div>

Yemoo'S JS Blog 2006-06-27 17:31 发表评论