解决 display:inline-block 左右间距问题 & 上下不对齐问题

一 、左右间距问题

.h-div{
	width:100px;
	height: 50px;
	background: plum;
	border: 1px solid darkslateblue;
	display: inline-block;
}

<div class="h">
	<div class='h-div'></div>
	<div class='h-div'></div>
	<div class='h-div'></div>
</div>

常用解决方案：
1.去掉标签中的换行
优点：从根本解决问题，或者同理直接将其写在同一行。【仅推荐：注释方式】
缺点：注释方式，数量多时较麻烦，相对不方便与项目维护；同一行的代码就没法看了~

<div>
	<div class='h-div'></div><!--
	--><div class='h-div'></div><!--
	--><div class='h-div'></div>
</div>

2.margin的负值
缺点：在不同的分辨率下，margin-left的取值不同，不建议使用。

.h-div{
    margin-left: -5px;
 }

3.font-size
缺点1：兼容性不够好，
在14寸（1360768）上，Safari没有用
在15.4寸（18002880）Mac上，Safari和chrome均可以
（这个缺点在现在浏览器上，其实也可以忽略啦~）
缺点2：
会将内部元素的font-size也变成0，需要子标签元素再设置font-size，非常麻烦！
而且如果作为公共组件，有些字体大小不能都完全一样写死，此方式就很不灵活了~

.h{
	font-size: 0;
}
.h-div{
	font-size: 14px;
}

4.letter-spacing、word-spacing方式【推荐使用！】
原理同font-size。
与font-size不同，一般word-spacing 没有特殊的设置，不会全局有太多差异。
故通过.h>* 将子集的word-spacing 全都恢复，这样也不用挨个设置子元素。
方便，通用。

.h{
	word-spacing: -20px; //由于浏览器分辨率不同，将父级的负值设置大一些，确保没有空隙
}
.h > *{
	word-spacing: 0;  // 此方式简便快捷！
}

【个人更倾向于word-spacing方式，推荐！】

.h{
	letter-spacing: -20px;
}
.h>*{
	letter-spacing: 0; 
}

二、上下不居中问题

.v-div{
	width:100px;
	height: 50px;
	background: pink;
	border: 1px solid hotpink;
	display: inline-block;
	vertical-align: bottom;
}

<div class="v">
	<div class='v-div'></div>
	<div class='v-div' style="height: 80px;"></div>
	<div class='v-div'></div>
</div>

display：inline-block，是基于baseline对齐的，同一行的元素高度不同，会导致上下不齐。
常用解决方案：
设置vertical-align属性：

v-div{
	vertical-align: middle;
}

v-div{
	vertical-align: top;
}