<!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. android QQ消息左滑动删除实例（优化版SwipeListViewEX）

    仿 QQ消息左滑动删除item消息实例 源代码参考:http://blog.csdn.net/gaolei1201/article/details/42677951 自己作了一些调整,全部代码下载地址 ...

  2. mysql行锁和表锁

    mysql innodb支持行锁和表锁,但是MyIsam只支持表锁.现在我们说说mysql innodb的行锁和 有如下表id为主键 为了出现演示效果,我们将mysql的autocommit设置为0 ...

  3. python json

    #-*-coding:utf-8-*- '''编码格式记得统一,不然容易出现中文乱码,推荐用utf-8''' import json ##################json单对象######## ...

  4. PCIe 32GT/s 含义

    如下: Jul 26 03:42:53 kernel: ixgbe 0000:01:00.1: PCI Express bandwidth of 32GT/s available Jul 26 03: ...

  5. 构建 ARM Linux 4.7.3 嵌入式开发环境 —— BusyBox 构建 RootFS

    上一篇我们已经成功将 ARM Linux 4.7.3 的内核利用 U-BOOT 引导了起来.但是细心的你会发现,引导到后面,系统无法启动,出现内核恐慌 (Kernel Panic). 原因是找不到文件 ...

  6. SCCM 客户端的修复

    1. Stopping the SMS Agent Host service (net stop ccmexec) 2. Stopping the WMI service (net stop winm ...

  7. [转]NPOI导出EXCEL 打印设置分页及打印标题

    本文转自:http://www.cnblogs.com/Gyoung/p/4483475.html 在用NPOI导出EXCEL的时候设置分页,在网上有查到用sheet1.SetRowBreak(i)方 ...

  8. 解决chrome在docky上的图标模糊或不能锁定的问题

    1,终端执行以下命令:sudo nautilus2,打开usr/share/application,找到chrome的图标,右键找到属性,把“命令”里的内容换成/usr/bin/google-chro ...

  9. 【原】css实现两端对齐的3种方法

    说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐.右对齐的方式来对齐页面 ...

  10. TeamTalk源码分析之login_server

    login_server是TeamTalk的登录服务器,负责分配一个负载较小的MsgServer给客户端使用,按照新版TeamTalk完整部署教程来配置的话,login_server的服务端口就是80 ...