display为inline-block的元素中间有间隙的原因和解决办法
Posted my466879168
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了display为inline-block的元素中间有间隙的原因和解决办法相关的知识，希望对你有一定的参考价值。
display为inline-block的元素在水平方向上之间会有间隙
原因：标签与标签之间使用了空格或者是换行符(空白字符也是字符，样式会影响)
解决办法一： 不使用空白符号，使用注释替代换行、标签的结束标签与开始标签写在一起等（代码的可读性较差）
解决办法二：设置父元素的font-size为0，子元素重新设置字体大小（增加了代码量）
解决办法三：使用负的margin-left（空隙是由上下文的字体大小带来了，每个浏览器的都不一样）
解决办法四：使用letter-spacing属性（字符边距）设为负值
解决办法五：使用word-spacing属性（字符边距）设为负值
解决办法六：设置display为block或者浮动（高度塌陷 需要清除浮动）
以上是关于display为inline-block的元素中间有间隙的原因和解决办法的主要内容，如果未能解决你的问题，请参考以下文章
display:inline-block间隙产生的原因以及解决方案
设置两个DIV为display:inline-block出现上下错位问题