根本原因: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. 了解HTML列表

    前面的话 从某种意义上讲,不是描述性文本的任何内容都可以认为是列表.人口普查.太阳系.餐馆菜单等都可以表示为一个列表或列表的列表.列表分为无序列表.有序列表和定义列表三种 无序列表 无序列表(unor ...

  2. Java集合专题总结(1):HashMap 和 HashTable 源码学习和面试总结

    2017年的秋招彻底结束了,感觉Java上面的最常见的集合相关的问题就是hash--系列和一些常用并发集合和队列,堆等结合算法一起考察,不完全统计,本人经历:先后百度.唯品会.58同城.新浪微博.趣分 ...

  3. 基於tiny4412的Linux內核移植--- 中斷和GPIO學習(3)

    作者 彭東林 pengdonglin137@163.com 平臺 tiny4412 ADK Linux-4.4.4 u-boot使用的U-Boot 2010.12,是友善自帶的,爲支持設備樹和uIma ...

  4. mongodb安装&简单使用

    转自Mac下使用brew安装mongodb,按着步骤已成功安装. brew常用命令 1.更新brew本身 brew update 2.使用brew安装软件 1 brew install soft_na ...

  5. 利用Python进行数据分析(13) pandas基础: 数据重塑/轴向旋转

    重塑定义     重塑指的是将数据重新排列,也叫轴向旋转. DataFrame提供了两个方法: stack: 将数据的列“旋转”为行. unstack:将数据的行“旋转”为列. 例如: 处理堆叠格式 ...

  6. afxcomctl32.h与afxcomctl32.inl报错

    afxcomctl32.h与afxcomctl32.inl报错 编译公司一个几年前的老项目,是从VC6.0升级到VS2005的. 1.编译时报缺少头文件,于是附件包含目录,于是出现了以下报错: 1&g ...

  7. C#获取硬盘序列号的问题求助

    具体问题是这样的:我用下面这段获取硬盘型信息的代码做成的exe文件,在机子上测试的时候,出现直接双击运行和用管理员身份运行结果不一样的情况,这个问题该怎么解决? public static Strin ...

  8. StackExchange.Redis帮助类解决方案RedisRepository封装(散列Hash类型数据操作)

    本文版权归博客园和作者本人共同所有,转载和爬虫请注明本系列分享地址:http://www.cnblogs.com/tdws/p/5815735.html 上一篇文章的不合理之处,已经有所修改. 今天分 ...

  9. GridView/DataGrid行单击和双击事件实现代码_.Net教程

    功能: 单击选中行,双击打开详细页面 说明:单击事件(onclick)使用了 setTimeout 延迟,根据实际需要修改延迟时间 ;当双击时,通过全局变量 dbl_click 来取消单击事件的响应  ...

  10. Aspose.Cells导出Excel(1)

    利用Aspose.Cells导出excel 注意的问题 1.DataTable的处理 2.进行编码,便于中文名文件下载 3.别忘了Aspose.Cells.dll(可以自己在网上搜索) public ...