记录：两个display: inline-block;内联块元素之间的空隙问题

举例：inline-block之间存在空隙

<div class="example">
	<span>inline-block之间存在空隙span>
	<span>inline-block之间存在空隙span>
div>

/*css:*/
.example span {
	display: inline-block;
	background: #ccc;
}

---

问题：出现空隙的原因是元素之间的空格存在

解决1：inline-block元素不换行

<div class="example">
	<span>inline-block之间存在空隙span><span>inline-block之间存在空隙span> 
div>

---

解决2：inline-block元素标签不闭合

<div class="example">
	<span>inline-block之间存在空隙
	<span>inline-block之间存在空隙
div>

注意：如果有ie兼容需求：最后一个元素标签要闭合 如下

<div class="example">
	<span>inline-block之间存在空隙
	<span>inline-block之间存在空隙span>
div>

---

解决3：inline-block元素标签之间使用注释

<div class="example">
	<span>inline-block之间存在空隙span><span>inline-block之间存在空隙span>
div>

---

解决4：inline-block元素父级设置font-size: 0;，inline-block元素内设置字体大小

.example {
	font-size: 0;
}
.example span {
	display: inline-block;
	background: #ccc;
	font-size: 16px;
}

注意： 兼容chrome，取消chrome最小字体大小限制

.example {
	font-size: 0;
	-webkit-text-size-adjust:none;
}
.example span {
	display: inline-block;
	background: #ccc;
	font-size: 16px;
}

参考文章地址：https://www.cnblogs.com/bigboyLin/p/4624805.html