根本原因:inline-block元素之间之所以有空白间距是因为空格有字体大小原因。

第一种:

  把代码之间的换行空白都去掉。

例如:

<div>第一个inline-block元素</div><div>第二个inline-block元素</div>

第二种:  

  把inline-block元素用一个大的div包起来,然后设置其字体大小为0即可,inline-block元素字体大小再单独设置。

  例如:

<div style=”font-size:0" class="space">
          <div>第一个inline-block元素</div>
          <div>第二个inline-block元素</div>
     </div>

这个方法,基本上可以解决大部分浏览器下inline-block元素之间的间距(IE7等浏览器有时候会有1像素的间距)。不过有个浏览器,就是Chrome, 其默认有最小字体大小限制,因为,考虑到兼容性,我们还需要添加:

类似下面的代码:

.space {

font-size: 0;

-webkit-text-size-adjust:none;

}

去除inline-block元素间间距的更多相关文章

  1. CSS3如何去除 inline block 元素之间多出的空格

    display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...

  2. 去除inline-block元素间间距的N种方法

    这篇文章发布于 2012年04月24日,星期二,22:38,归类于 css相关. 阅读 147771 次, 今日 52 次 by zhangxinxu from http://www.zhangxin ...

  3. [转]去除inline-block元素间间距的N种方法

    来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] 一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子 ...

  4. 去除inline-block元素间间距的N种方法<转>

    一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type="su ...

  5. 去除inline-block元素间间距的N种方法(转)

    一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type="su ...

  6. 去除inline-block元素间间距的N种方法-zhangxinxu

    张鑫旭原文:点这里进入原文 另外附上大漠老师的如何解决inline-block元素的空白间距地址!!! 去除inline-block元素间间距的N种方法: 一.现象描述 真正意义上的inline-bl ...

  7. 转载>>去除inline-block元素间间距的N种方法《重》

    一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type="su ...

  8. 如何消除inline-block元素间间距问题(转)

    一.现象描述    真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type=" ...

  9. 【小知识点】去除inline-block元素间间距的办法

    之前一直用float浮动方法布局,因为display:inline-block有间隙,现在找到办法了.在父元素上面加font-sise:0,就可以了. 效果如图: 代码如下: <!DOCTYPE ...

随机推荐

  1. SubSonic3.0使用存储过程查询时,不能使用output参数返回值的问题修改

    有个群友问SubSonic3.0执行存储过程时能不能使用output参数返回值,说测试过后获取不到返回值,早上有些时间所以就尝试修改了一下 首先在数据库中创建一个存储过程 CREATE PROCEDU ...

  2. Lisp和SICP

         大概不少programmer都看过<黑客与画家>,作者用了整整一章的篇幅讨论Lisp的强大.我自然就会手痒痒.      几个月前,几天内攻城略地搞定了Python,用的方法便是 ...

  3. [原创]django+ldap实现统一认证部分一(django-auth-ldap实践)

    前言 接之前我的文章,django+ldap+memcache实现单点登录+统一认证 ,ldap部署相关,ldap双机\LAM配置管理\ldap备份还原,目前来说,我们已经有了高可用性的ldap环境了 ...

  4. 微信小程序基础入门

    准备 Demo 项目地址 https://github.com/zce/weapp-demo Clone or Download(需准备GIT环境) $ cd path/to/project/root ...

  5. Kafka资源汇总

    终于下定决心写一点普及类的东西.很多同学对Kafka的使用很感兴趣.如果你想参与到Kafka的项目开发中,很多资源是你必须要提前准备好的.本文罗列了一些常用的Kafka资源,希望对这些develope ...

  6. C#多态“说来也说”——逻辑层BLL中的多态使用

    本文版权归博客园和作者吴双本人共同所有.欢迎转载,转载和爬虫请注明原文地址 http://www.cnblogs.com/tdws/p/5861842.html 昨天晚上,有个朋友说学了好久,依然没搞 ...

  7. asp.net MVC4——省市三级联动

    controller: public ActionResult GetCity(string id) { AreaService _areaSvc = new AreaService(); List& ...

  8. java重载与覆写

    很多同学对于overload和override傻傻分不清楚,建议不要死记硬背概念性的知识,要理解着去记忆. 先给出我的定义: overload(重载):在同一类或者有着继承关系的类中,一组名称相同,参 ...

  9. ActiveMQ(li)

    一.ActiveMQ 首先,ActiveMQ不是一个框架,它不是struct,webx,netty这种框架,它更像是tomcat服务器,因为你使用它之前必须启动它,activeMQ和JMS的关系有点类 ...

  10. 共享Excel编辑的一些资源

    官方资料: 使用共享工作簿进行协作 相关介绍文章: http://www.ittribalwo.com/article/678.html http://www.wuji8.com/meta/85646 ...