去除display:inline-block元素之间间距的方法

使用display:inline-block的元素布局时，会因代码换行显示或空格而产生间隙，比如

        <style>div{}div p{display: inline-block;padding: .5em;background-color: skyblue;}</style><div><p>超级</p><p>弹珠</p><p>坏蛋</p></div>

解决方案一：除去代码标签之间的空格

<div><p>超级</p><p>弹珠</p><p>坏蛋</p></div>

但这样不利于代码的可读性

所以一般这样写

<div><p>超级</p><p>弹珠</p><p>坏蛋</p></div>

或者借助html注释

<div><p>超级</p><!--  --><p>弹珠</p><!-- --><p>坏蛋</p></div>

解决方案二：父级设置font-size：0，子级再重设font-size