<!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>
