去除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