inline-block元素间留白现象探究
现象说明
最近在项目发布的时候遇到了一个奇怪的问题，在项目使用gulp打包压缩后发现之前一些行内元素间的空白消失了，导致页面中一些布局出现了问题
正常样式如下：
最开始出现这个问题的时候以为是gulp在压缩css，html出现了什么问题，一直在对比压缩前后对应节点的样式和结构，但却始终没有发现问题。
通关观察元素的盒模型，觉得这段空白实际上是不应该出现的，压缩后异常的样式反而是正常的。最后通过查阅资料最后发现原来inline-block元素
的自动留白造成的这一空隙的出现。
空白出现原因
其实产生这一空白的原因是我们在平时编码的时候这种行内元素之间往往会有一个换行符或空格，浏览器会识别并为我们的行内元素见插入一段空白。
代码对比如下：
压缩前html
<style>
ul li {
display: inline-block;
background-color: aquamarine
}
</style>
<body>
<ul>
<li>元素1</li>
<li>元素2</li>
<li>元素3</li>
<li>元素4</li>
</ul>
</body>
压缩后html示例
<style>
ul li {
display: inline-block;
background-color: aquamarine
}
</style>
<body><ul><li>元素1</li><li>元素2</li><li>元素3</li><li>元素4</li></ul></body>
出现这种情况不能算是bug，是一种良好布局规范的体现。但是并不是任何时候都需要这种留白，有时候这种浏览器默认的留白会对并清楚原理的开发人员
造成不必要的干扰。那有什么办法可以取消这一默认设置吗。
去除inline-block元素间间距
针对这一问题网上提出了很多的解决办法在这里我就不再复述，给出的每种办法都很巧妙，不得不佩服程序员的智慧。（点击查看）
项目压缩前和压缩后出现不同的布局显然是不可取的，所以后来的话通过改变gulp压缩配置的方式保留了元素间的换行符，尽可能的保持一致。
避免出现异常的布局问题。
inline-block元素间留白现象探究的更多相关文章
- CSS3如何去除 inline block 元素之间多出的空格
display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...
- 如何消除inline-block元素间间距问题（转）
一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type=" ...
- 去除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 ...
- 去除inline-block元素间间距的N种方法(转)
一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type="su ...
- 去除inline-block元素间间距的N种方法-zhangxinxu
张鑫旭原文:点这里进入原文 另外附上大漠老师的如何解决inline-block元素的空白间距地址!!! 去除inline-block元素间间距的N种方法: 一.现象描述 真正意义上的inline-bl ...
- 转载>>去除inline-block元素间间距的N种方法《重》
一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type="su ...
- css中font-size为0的妙用（消除内联元素间的间隔）
前言 <div> <input type="text"> <input type="button" value="提交& ...
随机推荐
- Microsoft Graph Web应用程序极致开发体验
作者:陈希章 重写于 2017年5月24日 前言 这篇文章最早写于2017年5月2日,当时的想法是从最简单的方式来写如何在一个ASP.NET MVC应用程序中集成Microsoft Graph,但实际 ...
- Asp.net MVC 填充word并下载
使用Aspose.word填充内容并下载(免费版Aspose) 填充固定模式的Word文档,需要先制作Word模板: Aspose.Words主要通过Words里域(Fields)来控制内容. ...
- vue从入门到女装：从零开始搭建后台管理系统（一）安装框架
安装及运行都是基于node的,不会node的可以自行百度,网上教程很多,也不难 项目效果预览: demo1 demo2 源码下载 开始安装框架: vue ==>vue-cli安装 eleme ...
- iOS 跳转到 App Store 下载评分页面
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...
- ligerUI---下拉框(Combobox)
写在前面: 突然发现,从刚开始对ligerUI的抵触,觉得都没有接触过,也不会,到现在,感觉ligerUI的一些组件还是挺好用的,大概日久生情吧.嘻嘻~~~,下拉框是常用的一个组件,在之前的博客中也写 ...
- shell编辑crontab任务
crontab是Linux下执行定时任务的工具,之前偶尔需要用到时都是通过执行crontab -e命令或者通过root身份直接编辑/etc/cron.*/下的文件来添加定时任务.这段时间遇到了需要通过 ...
- BCryptPasswordEncoder加密及判断密码是否相同
项目中用到了BCryptPasswordEncoder对密码进行二次加密,需要注意的是,加密后的字符串比较长,数据库的长度至少为60位. 通过BCryptPasswordEncoder的加密的相同字符 ...
- DataBase MongoDB高级知识-易使用
MongoDB高级知识-易使用 mongodb是一个面向文档的数据库,而不是关系型数据库.不采用关系模型主要是为了获取更好的扩展性.当然还有其他的一些好处. 与关系型数据库相比,面向文档的数据库不再有 ...
- Oracle初级——续续篇
逝者如斯夫,不舍昼夜 所有的SQL都经过测试,可粘贴,可复制,有问题请各位大神指出...... --约束 与表一起使用 约束不合理的数据,使其不能进入表中? ','李小龙','一班','该学生成天练武 ...
- 数据库入门（以MySQL为例）
一.数据库中的概念 1.数据库是用户存放数据.访问数据.操作数据的存储仓库,用户的各种数据被有组织地存放在数据库中.可以随时被有权限的用户查询.统计.添加.删除.和修改.可以说,数据库是长期存储在计算 ...