<!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. Mac下开启FTPserver

    开启命令 sudo -s launchctl load -w /System/Library/LaunchDaemons/ftp.plist   关闭命令 sudo -s launchctl unlo ...

  2. MySQL性能优化经验

    核心 不做运算 md5() Order By Rand() 控制单表数据量 保持表字段苗条 平衡范式与冗余 拒绝3B Big SQL Big Transaction Big Batch 字段 用好数值 ...

  3. 微软Nokia 222：可拍照可上网 售价37美元 32GB的microSD卡扩展

    腾讯科技讯 8月27日,在几乎所有厂商都在智能手机领域大肆拼杀的时候,微软日前却悄悄地发布了一款功能手机Nokia 222. 目前,尽管全球许多发达国家的居民都对互联网已经再熟悉不过了,但事实上全球依 ...

  4. 3.10.17 procfs示例

    /* *    wesley *    the linux module sample of procfs *     *    wesley for testing *    2013-12-23 ...

  5. 猜拳游戏GuessGame源码

    该游戏是一款比较不错的猜拳游戏GuessGame源码案例,GuessGame——猜拳游戏,这也是我自己的第一款休闲类的游戏案例,游戏实现也比较简单的,希望这个能够帮大家的学习和使用,更多安卓源码尽在源 ...

  6. 理解 QEMU/KVM 和 Ceph（2）：QEMU 的 RBD 块驱动（block driver）

    本系列文章会总结 QEMU/KVM 和 Ceph 之间的整合: (1)QEMU-KVM 和 Ceph RBD 的 缓存机制总结 (2)QEMU 的 RBD 块驱动(block driver) (3)存 ...

  7. Unity打包同一文件Hash不一样

    问题起因 游戏开发基本都会涉及到资源版本管理及更新,本文记录我在打包过程中遇到的一小问题: 开过中常用于标记资源版本的方法有计算文件Hash.VCS的版本等. 在Unity中对同一个资源文件进行多次打 ...

  8. 使用PLSQL导入导出数据库

    Oracle如何实现创建数据库.备份数据库及数据导出导入的一条龙操作 Oracle中对数据对象和数据的管理,无疑都是使用PL/SQL Developer来进行管理,该工具也提供给我们很多方便.快捷的操 ...

  9. linux负载均衡总结性说明（四层负载/七层负载）

    在常规运维工作中,经常会运用到负载均衡服务.负载均衡分为四层负载和七层负载,那么这两者之间有什么不同?废话不多说,详解如下: 一,什么是负载均衡1)负载均衡(Load Balance)建立在现有网络结 ...

  10. PL/SQL异常处理方法

    PL/SQL异常处理方法   1:什么是异常处理: PL/SQL提供一个功能去处理异常,在PL/SQL块中叫做异常处理,使用异常处理我们能够测试代码和避免异常退出. PL/SQL异常信息包含三个部分: ...