上海专业做网站公司常见网页制作工具

问题：在本地项目中使用【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】解决。