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="提交& ...
随机推荐
- javascript中的事件Event
一.事件流 1.事件流:描述的是从页面中接受事件的顺序 IE的事件流是事件冒泡流,Netscape的事件流是事件捕获流. 2.事件冒泡 IE的事件流叫做事件冒泡(event bubbing),即事件开 ...
- Uva 01124, POJ 3062 Celebrity jeopardy
It's hard to construct a problem that's so easy that everyone will get it, yet still difficult enoug ...
- 来腾讯云开发者实验室 学习.NET
腾讯云开发者实验室为开发者提供了一个零门槛的在线实验平台,开发者实验室提供的能力: 零门槛扫码即可免费领取实验机器,支持使用自有机器参与,实验完成后支持保留实验成果: 在线 WEB IDE 支持 sh ...
- C:宏定义的一些格式（怕忘记）
现在还没怎么用到宏定义,但以后肯定会经常用的,写下这盘,以后忘记了可以温故.首先宏定义必须写在函数之外,其作用域从宏定义命令起到源程序结束,也就是说一但定义系统就会分配内存,想让它结束用“#undef ...
- vs发布项目webconfig替换语法
关于vs发布项目时webconfig替换语法也是最近才学到的东西,写这篇文章就当是作个备忘录吧,如果能帮助别人能够学习到webconfig如何替换那就再好不过了. 1.认识一下web项目下的web.D ...
- ArcGIS 网络分析[8] ArcObjects二次开发之底层网络分析开发
基于现有的线要素类.转弯要素类(在地理数据库的要素数据集中),要用AO做两件事: 1. 创建网络数据集(使用Geodatabase类库) 2. 执行网络分析(使用NetworkAnalyst类库) 在 ...
- Visual simultaneous localization and mapping: a survey 论文解析（全）
当激光或声纳等距离传感器被用来构建小的静态环境的二维地图时,SLAM的问题被认为是解决的.然而,对于动态,复杂和大规模的环境,使用视觉作为唯一的外部传感器,SLAM是一个活跃的研究领域. 第一部分是简 ...
- 基于阿里云的JavaEE系统框架介绍
基于阿里云的系统框架展望 1) CDN 用于缓存静态文件等等.七牛和阿里的都还可以. 七牛要做的久一点,各种图片处理的接口要完善一些 阿里的CDN要稍微好一点点,但是没有不安全的访问方式,访问稍微没有 ...
- 自定义php错误异常处理
set_exception_handler() 函数设置用户自定义的异常处理函数. 该函数用于创建运行时期间的用户自己的异常处理方法. 该函数会返回旧的异常处理程序,若失败,则返回 null. set ...
- bash脚本之数组学习
在bash中可使用索引数组和关联数组,bash在4.0版本之后才添加了对关联数组的支持 一.索引数组 1.定义索引数组 # 方式1 array_value=(1 2 3 4 5 6)或者array_v ...