“内联”之间的神秘空白
这个问题在这里已经有了答案：
解决方案1：添加评论：
<div class="tr" style="width: 150px;">
<div class="td" style="width: 50px; background-color: #CCC;"></div><!--
--><div class="td" style="width: 50px; background-color: #AAA;"></div><!--
--><div class="td" style="width: 50px; background-color: #666;"></div>
</div>
您也可以将所有内容都写在同一行上，但看起来更干净并带有注释。
解决方案2：将font-size:0添加到父元素。 不要忘记为子元素定义字体大小：
.tr {
font-size: 0;
}
.td {
font-size: 15px;
}
使用浮动
.td {
float: left;
height: 20px;
margin: 0;
padding: 0;
}
浏览器显示内嵌块元素之间的切换/换行符。 你可以删除它们，但可能更好地使用某种浮动的td类。
我不确定你想用你的标记显示什么样的数据，但对于表格数据，表格的使用是完美的！ ;）
链接地址: http://www.djcxy.com/p/89273.html