如何消除inline-block产生的元素间空隙
前端初学者可能都会碰到这个问题:有时候排版需要,会把一些块状元素的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产生的元素间空隙的更多相关文章
- 如何消除inline-block元素间间距问题(转)
一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type=" ...
- css中font-size为0的妙用(消除内联元素间的间隔)
前言 <div> <input type="text"> <input type="button" value="提交& ...
- 块状元素和内联元素 【inline block】
// 9) { colorRandom += colorArray[randomV - 10]; } else { colorRandom += randomV; } } currentEle.css ...
- 【css】主要的块状元素(block element)和内联元素(inline element行内元素)
内联元素:只在行内发生作用,设置宽高不起作用,不会影响文字内容,使其换行等.竖直方向和间距也不起作用 display可以强制转换行内元素和块状元素,还可以取消显示none 块元素(bloc ...
- block(块级元素)和 inline(内联元素) 的区别
block(块级元素)和 inline(内联元素) 的区别 (2009-01-05 10:32:07) 转载▼ 标签: 杂谈 分类: div+css div这样的块级元素,就会自动占据一定矩形空间,可 ...
- CSS3如何去除 inline block 元素之间多出的空格
display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...
- 去除inline-block元素间间距的N种方法
这篇文章发布于 2012年04月24日,星期二,22:38,归类于 css相关. 阅读 147771 次, 今日 52 次 by zhangxinxu from http://www.zhangxin ...
- [转]去除inline-block元素间间距的N种方法
来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] 一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子 ...
- 去除inline-block元素间间距的N种方法<转>
一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type="su ...
随机推荐
- 当我们在谈论 DevOps,我们在谈论什么?
Cloud Insight 携手 BearyChat:打造适合运维人员的团队协作工具 走过 C 轮的 OneAPM,旗下的产品已经日渐丰满,从应用性能监控的 Application Insight 到 ...
- SVN 修改URL路径|SVN 项目路径修改
在svn的根目录下面右键 输入要修改的地址: 点击ok 搞定... ~~~
- bzoj2064
这道题初看真的毫无思路,又是合并又是分裂的 但实际上我们知道,当两组和相等的时候才能由一组变成另一组 我们将初始状态和最终状态划分成若干对,每对中的两组元素和相等的 不难发现,最少步骤=n+m-2*对 ...
- 重装VS2010时出现未能正确加载 "radlangsvc.package,radlangsvc.vs...
解决办法: 开始-->所有程序--Microsoft visual studio2010-->visual studio tools-->visual studio 2010命令提示 ...
- 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 ...
- Ubuntu系统下为IDEA创建启动图标
默认情况下,ubuntu将自动安装的软件快捷方式保存在/usr/share/applications目录下,如果我们要创建桌面快捷方式,需要在该目录下创建一个名为“idea.desktop”的文件. ...
- checkbox操作
小小示例:自己备份顺便粘出来共享. 引入头部文件:<script src="../js/jQuery1.7.2.js"></script> HTML代码: ...
- MySQL生僻字(不常用字)的完整解决方案
查看 MySQL 数据库服务器和数据库字符集 show variables like '%char%'; 查看 MySQL 数据表(table) 的字符集 show table status from ...
- openStack云平台虚拟桌面galera mysql 3节点集群实例实战
- nginx简单双机热备:backup参数的使用
nginx简单双机热备:backup参数的使用 nginx简单双机热备:backup参数的使用