本文主要是介绍【css】使用display:inline-block后，元素间存在4px的间隔，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
问题：在本地项目中使用【display: inline-block】，元素间存在4px间隔。打包后发布到外网又不存在这个问题了。
归根结底这是一个西文排版的问题，英文有空格作为词分界，而中文则没有。
此时的元素具有文本属性，只要标签与标签之间有间隔【换行符|空格|间隙】都会被当作以一个字体大小的空格，就会出现4px的间隙。而且在垂直方向上，文本的基线不同也会造成错位。
使用【display: inline-block】出现间隔，解决办法：
①在写代码时，全部写在一行上，移除了空格问题（代码可读性大大降低）。
②如果打包项目后未进行压缩处理，可以设置子元素（除第一个）【margin-left:-5px】。
③父级元素中【font-size:0】,再在子元素单独设置字体大小【font-size:14px】。
④父级元素中【letter-spacing: -5px】,再在子元素单独设置【letter-spacing: 0】。
⑤父级元素中【word-spacing: -5px】,再在子元素单独设置【word-spacing: 0】。
参考文章：拜拜了,浮动布局-基于display:inline-block的列表布局 « 张鑫旭-鑫空间-鑫生活
使用【display: inline-block】出现上下错位，解决办法：
①使子元素的高度相同。
②如果两个div高度不相同，可以使用【vertical-align: top|middle|bottom 】进行【上|中|下】对齐。
③使用【overflow: hidden】解决。
这篇关于【css】使用display:inline-block后，元素间存在4px的间隔的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
