关于display inline-block 产生间距的问题
Posted 玛丽莲梦露
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于display inline-block 产生间距的问题相关的知识，希望对你有一定的参考价值。
我们在使用给标签添加diaplay:inline-block属性后，标签并排显示后之间会产生3px的间距空白问题。
间距是如何产生的？
1.我们在使用内联元素的标签时候，例如img标签没有设置display属性同样会产生间距，这是因为我们在书写标签的时候为了代码的简洁直观会换行，但是浏览器在解析的时候会把这个换行解析成一个字符，这样就会有一个3px空白，display：inline-block属性产生的原因一样如此。
当我们不使用换行时，就不会有间距了。
解决方法：
1.标签不换行；
2.设置左间距：margin-left:-3px;
3.标签不闭合，浏览器会自动闭合；
以上是关于关于display inline-block 产生间距的问题的主要内容，如果未能解决你的问题，请参考以下文章
display:inline-block间隙产生的原因以及解决方案
前端面试 CSS— 使用 display:inline-block 会产生什么问题？解决方法？
li标签设置display:inline-block后产生的间距