最近在项目发布的时候遇到了一个奇怪的问题，在项目使用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>