<!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. mongo日志切割脚本

    两种mongo日志切割脚本 vim /etc/logrotate.d/mongodb /home/mongodb/mongolog/mongod.log { daily rotate 7 compre ...

  2. Qt使用自带的windeployqt 生成exe来发布软件

    集成开发环境 QtCreator 目前生成图形界面程序 exe 大致可以分为两类:Qt Widgets Application  和 Qt Quick Application.下面分别介绍这两类exe ...

  3. php5.3 fastcgi方式 安装以及和nginx整合

    注意:不要随便改变基础库的版本,否则会对别的软件产生编译错误 1.基础依赖包安装: cd /software/zlib- ./configure make make install cd /softw ...

  4. ANSI Common Lisp Learn

    It has been a long time that I haven't dealt with my blog. On one hand I was preparing the exams.On ...

  5. VS设置程序集属性(文件的详细信息)

    适用范围 本文方法适用于:C#创建的控制台程序,WinForm,WPF等VS创建的.Net工程信息设置. 方法步骤 1.在 项目 上点击鼠标右键选择 属性 ,进入这个页面,点击 程序集信息(重点关注 ...

  6. flex sdk中mx_internal function getTextField() 这种函数如何调用？

    在用flex 开发中,一些函数前打上了 mx_internal 外部调用不了,其实这样写就可以了 xxx.mx_internal::getTextField() 而 xxx.getTextField( ...

  7. 对RTMP视频流进行BitmapData.draw()出错的解决办法

    source on github 在对Flash Media Server中的视频流使用BitmapData.draw()进行绘制的时候,会抛出这样异常: cannot access rtmp://x ...

  8. 从零开始学CSRF

    为什么要拿CSRF来当"攻击手法系列"的开头篇呢?因为CSRF/XSRF我个人喜爱他的程度已经超过XSS了.如果说XSS是一个老虎,那么CSRF就是隐藏在暗处的蛇. 相信现在很多人 ...

  9. jQuery学习之jQuery Ajax用法详解

    jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...

  10. Java多态:upcast和downcast

    upcast例: public class Test { public static void main(String[] args) { Cup aCup = new BrokenCup(); aC ...