CSS HACK tab制表符导致行内元素之间的空隙如何解决

浏览数：42 / 时间：2015年06月09日

<!DOCTYPE html>
<html lang="zh-CN"><head>
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-language" content="zh-CN" />
<title>测试</title>
<style type="text/css">
.item_content {
  float: right;
   background-color:red;
  width:50%;
  font-size: 0px;
}

.item{
  background-color:pink;
}

.item2{
  background-color:#888;
}

.item3{
  background-color: #ff9;
}

.item_icon{
  float: left;
}

</style>
</head>

<body>
<div>
  <div class="item_content">
    <span class="item">北京春季招建筑工人月均工资9621元 秒杀白领</span>
    <span class="item2">...</span>
    <span class="item3">nnn ...</span>
  </div>
</div>
</body>
</html>

运行上述代码会得到如下结果：

技术分享

出现了不该有的空隙，这是什么原因导致的呢？

原因：这是行内元素之间的tab制表符产生的，换行符也会产生这样的间隙，而字符的大小是定义字体大小来控制的，所以可以通过设置父元素字体大小font-size:0，并指定子元素字体大小来达到清除间隙的目的，针对IE6/7存在的1px间隙，可用*word-spacing:-1px;来清除。

将CSS代码修改一下即可：

<style type="text/css">
.item_content {
  float: right;
   background-color:red;
  width:50%;
  font-size: 0px;
}

.item{

  background-color:pink;
  font-size: 14px;

}

.item2{

  background-color:#888;
font-size: 14px;
}

.item3{
  
  background-color: #ff9;
font-size: 14px;
}

.item_icon{
  float: left;
}

</style>