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

CSS HACK tab制表符导致行内元素之间的空隙如何解决的更多相关文章

  1. 关于行内元素之间有空隙的问题，例如span与input之间

    问题如图: 想要的是下面的效果,而却出现上面的效果,解决方法如下: 对于行元素span或者input来说 很多人会用inline-block来显示他们,但是往往发现  中间会留一段小空隙 , 其实这个 ...

  2. css position 和 块级/行内元素解释

    一.position 属性: static:元素框正常生成.块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中. relative:元素框偏移某个距离.元素仍保 ...

  3. 清除行内元素之间HTML空白的几种解决方案

    行内块(inline-block)是非常有用的,特别是想要不用'block'和'float'来控制这些行内元素的margin,padding之时. 问题来了,HTML源码中行内元素之间的空白有时候显示 ...

  4. 清除行内元素之间的HTML空白

    原文连接:Remove Whitespace Between Inline-Block Elements 原文日期: 2013年8月27日 翻译日期: 2013年8月28日 至今我还记得年轻是在IE6 ...

  5. HTML行内元素与块级元素有哪些及区别详解

    转自 https://www.jb51.net/web/724286.html   这篇文章主要介绍了HTML行内元素与块级元素有哪些及区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具 ...

  6. 行内元素有哪些?块级元素有哪些?CSS的盒模型?转载

    块级元素:div p h1 h2 h3 h4 form ul行内元素: a b br i span input selectCss盒模型:内容,border ,margin,padding css中的 ...

  7. 【转】行内元素和inline-block产生的水平空隙bug

    重构工程师们在设计代码时,有喜欢手动删除行内元素之间产生的额外空隙,并通过设置margin或padding来获取想要间距吗?如代码: <div class=“”><span clas ...

  8. 解决行内元素间隙bug问题

    行内元素之间会产生间隙bug问题的场景: 1.当行内元素之间有“回车”.“tab”.“空格”时就会出现间隙. 如下代码: <div>   <a>1</a>   &l ...

  9. span i s等行内元素标签之间出现奇怪空格符号

    上述展开信息本来是这样写的,但是很奇怪windows下的测试环境支付时间前面莫名其妙多了个小方框 <p> <span><i>收货人:</i>{remar ...

随机推荐

  1. 烂泥：学习mysql的binlog配置

    本文由秀依林枫提供友情赞助,首发于烂泥行天下. 1.基础知识 日志是把数据库的每一个变化都记载到一个专用的文件里,这种文件就叫做日志文件.mysql默认只开启错误日志,因为过多的日志将会影响系统的处理 ...

  2. Java基础语法总结1

    一.标识符及字符集 Java语言规定标识符是以字母.下划线"_"或美元符号"$"开始,随后可跟数字.字母.下划线或美元符号的字符序列.Java标识符大小写敏感, ...

  3. MySQL字符集的修改和查看

    1.关于MySQL字符集 MySQL的字符集支持(Character Set Support)有两个方面: 字符集(Character set)和排序方式(Collation). MySQL对于字符集 ...

  4. 利用增量备份恢复因归档丢失造成的DG gap

    故障现象:data guard归档出现gap,悲剧的是丢失的归档在主库上被rman备份时删除了,丢失的归档大约有20几个,数据库大小约2T,如果重建DG将非常耗时间,因此决定利用增量备份的方式恢复DG ...

  5. 理解 OpenStack Swift （3）：监控和一些影响性能的因素 [Monitoring and Performance]

    本系列文章着重学习和研究OpenStack Swift,包括环境搭建.原理.架构.监控和性能等. (1)OpenStack + 三节点Swift 集群+ HAProxy + UCARP 安装和配置 ( ...

  6. 这回真的是挤时间了-PHP基础（三）

    hi 刚看了唐人街探案,5星好评啊亲.由于是早就约好的,也不好推辞(虽然是和男的..),但该写的还是得挤时间写.明天早上老师的项目结题,虽然和我关系不大,但不要添乱就好!! 1.PHP  一.PHP基 ...

  7. java 27 - 5 反射之 通过反射获取成员方法并使用

    类Method:提供关于类或接口上单独某个方法(以及如何访问该方法)的信息. A:获取所有方法 数组 1.getMethods  获取该类包括其父类的公共成员方法 2.getDeclaredMetho ...

  8. row_number()over(partition by 字段 order by 字段)ID，修改重复行的字段值。

    案例分析: 现在要查询一个表单里面的运费结果,但是他还有分录,为了显示分录,必须把表头显示出来,问题是,他要查询运费的合计, 但是这样就会导致重复行也加进去了,这样显然数据不准,为此,可以把重复的行设 ...

  9. Linux下Mongodb安装和启动配置

    1.下载安装包 wget http://fastdl.mongodb.org/linux/mongodb-linux-i686-1.8.2.tgz 下载完成后解压缩压缩包 tar zxf mongod ...

  10. Java 读取xlsx

    读取特别大的xlsx文件时, 需要使用StreamingReader, 可以控制JVM内存峰值在200M以内 InputStream is = new FileInputStream(new File ...