前端初学者可能都会碰到这个问题:有时候排版需要,会把一些块状元素的display属性设置为inline-block,如

<!-- HTML代码 -->
<div class="parent">
<div class="child">child</div>
<div class="child">child</div>
<div class="child">child</div>
<div class="child">child</div>
</div>
/* css代码 */
.child {display:inline-block;background-color:#ccc;}

浏览器中显示的结果:

虽然四个块状子元素排在了一行,但是子元素之间却留有空隙!

空隙产生原因:HTML中的换行符、空格符、制表符等空白符,字体大小不为0的情况下,空白符占据一定宽度,使用inline-block会产生元素间的空隙。

解决方法 :
1. 父元素的font-size设置为0,子元素的font-size设置为实际大小;
2. 子元素设置浮动;
3. 把所有的子元素写在一行;
4. 有时候子元素内容较长,所有子元素写在一行导致代码的可读性很差,这时候采用下面的写法(用HTML注释符把子元素连接起来):

<div class="parent">
    <div class="child"></div><!--
  --><div class="child"></div><!--
  --><div class="child"></div><!--
  --><div class="child"></div>
</div>

5. 父元素word-spacing设置负值(具体设为多少,我测试的结果显示:不同浏览器还不完全一致,暂不推荐此种方法)。

------------------------------------------------------------------------------------------------

参考评论,2015.10.30重新编辑

如何消除inline-block产生的元素间空隙的更多相关文章

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

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

  2. css中font-size为0的妙用(消除内联元素间的间隔)

    前言 <div> <input type="text"> <input type="button" value="提交& ...

  3. 块状元素和内联元素 【inline block】

    // 9) { colorRandom += colorArray[randomV - 10]; } else { colorRandom += randomV; } } currentEle.css ...

  4. 【css】主要的块状元素(block element)和内联元素(inline element行内元素)

      内联元素:只在行内发生作用,设置宽高不起作用,不会影响文字内容,使其换行等.竖直方向和间距也不起作用   display可以强制转换行内元素和块状元素,还可以取消显示none   块元素(bloc ...

  5. block(块级元素)和 inline(内联元素) 的区别

    block(块级元素)和 inline(内联元素) 的区别 (2009-01-05 10:32:07) 转载▼ 标签: 杂谈 分类: div+css div这样的块级元素,就会自动占据一定矩形空间,可 ...

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

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

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

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

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

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

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

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

随机推荐

  1. 当我们在谈论 DevOps,我们在谈论什么?

    Cloud Insight 携手 BearyChat:打造适合运维人员的团队协作工具 走过 C 轮的 OneAPM,旗下的产品已经日渐丰满,从应用性能监控的 Application Insight 到 ...

  2. SVN 修改URL路径|SVN 项目路径修改

    在svn的根目录下面右键 输入要修改的地址: 点击ok 搞定... ~~~

  3. bzoj2064

    这道题初看真的毫无思路,又是合并又是分裂的 但实际上我们知道,当两组和相等的时候才能由一组变成另一组 我们将初始状态和最终状态划分成若干对,每对中的两组元素和相等的 不难发现,最少步骤=n+m-2*对 ...

  4. 重装VS2010时出现未能正确加载 "radlangsvc.package,radlangsvc.vs...

    解决办法: 开始-->所有程序--Microsoft visual studio2010-->visual studio tools-->visual studio 2010命令提示 ...

  5. Lowest Common Ancestor of a Binary Tree——Leetcode

    Given a binary tree, find the lowest common ancestor (LCA) of two given nodes in the tree. According ...

  6. Ubuntu系统下为IDEA创建启动图标

    默认情况下,ubuntu将自动安装的软件快捷方式保存在/usr/share/applications目录下,如果我们要创建桌面快捷方式,需要在该目录下创建一个名为“idea.desktop”的文件. ...

  7. checkbox操作

    小小示例:自己备份顺便粘出来共享. 引入头部文件:<script src="../js/jQuery1.7.2.js"></script> HTML代码: ...

  8. MySQL生僻字(不常用字)的完整解决方案

    查看 MySQL 数据库服务器和数据库字符集 show variables like '%char%'; 查看 MySQL 数据表(table) 的字符集 show table status from ...

  9. openStack云平台虚拟桌面galera mysql 3节点集群实例实战

  10. nginx简单双机热备:backup参数的使用

    nginx简单双机热备:backup参数的使用 nginx简单双机热备:backup参数的使用