<!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 远程访问控制

    如需要让192.168.2.3的test用户可以访问本机所有数据库,mysql命令如下 mysql>GRANT ALL PRIVILEGES ON *.* TO 'test'@'192.168. ...

  2. 使用自定义setTimeout和setInterval使之可以传递参数和对象参数

    转载自http://www.jb51.net/article/17859.htm /****************************************************** //  ...

  3. RCC BUCK-BOOST变压器设计

    电路处于Buck-Boost DCM模式,最恶劣情况为输入电压最低时.取频率为f 以下图为例: 1.MOS耐压选择: Vmos≥Vinmax+Vout+80 2.保证磁芯不饱和且始终工作在DCM模式 ...

  4. Android开发快速入门（环境配置、Android Studio安装）

    Android是一种激动人心的开源移动平台,它像手机一样无处不在,得到了Google以及其他一些开放手机联盟成员(如三星.HTC.中国移动.Verizon和AT&T等)的支持,因而不能不加以学 ...

  5. Spring学习之AOP总结帖

    AOP(面向方面编程),也可称为面向切面编程,是一种编程范式,提供从另一个角度来考虑程序结构从而完善面向对象编程(OOP). 在进行 OOP 开发时,都是基于对组件(比如类)进行开发,然后对组件进行组 ...

  6. 什么是UV?

    转自http://www.cnblogs.com/jenry/p/4083415.html 1.什么是UV?   对于三维模型,有两个最重要的坐标系统,一是顶点的位置(X,Y,Z)坐标,另一个就是UV ...

  7. PHP的文件操作常用函数

    PHP文件操作 1 获得文件名:basename - 返回路径中的文件名部分 给出一个包含有指向一个文件的全路径的字符串,本函数返回基本的文件名.如果文件名是以 suffix 结束的,那这一部分也会被 ...

  8. [No000037]操作系统Operating Systems操作系统历史与硬件概况History of OS & Summaries!

    培根:读史使人明智 操作系统的简史 (1955-1965) 计算机非常昂贵,上古神机IBM7094 ,造价在250万美元以上 计算机使用原则:只专注于计算 批处理操作系统(Batch system) ...

  9. uva146 ID codes

    Description It is 2084 and the year of Big Brother has finally arrived, albeit a century late. In or ...

  10. Android使用Java Mail API发送邮件

    最近在考虑为已经有的一个应用程序增加一个用户反馈的功能,用户可以通过反馈功能将用户的意见和建议.程序出现的问题以一种更符合用户习惯的方式反馈回来.网上也有一些实现好的反馈程序的服务,包括bug的提交. ...