inline-block之间多余间隔问题

做练习时发现，多个inline-block在刚好大小的父容器中装不下而换行，检查元素发现inline-block之间有间隙。
举个简单例子：
div下两个span

<div>        
	<span style="background-color: red;">1</span>        
	<span style="background-color: blue;">2</span>    
</div>

设置span为inline-block

div{            
	width: 200px;    
}        
span{            
	display: inline-block;            
	width: 100px;        
}

两个span各100px，父容器200px但是却装不下，产生换行

inline-block之间间隙产生原因

在html代码中的回车换行被转成了空格，在当前字体大小不为0时，空格就占了一定宽度。

解决办法

1. 改变html书写，去掉换行
   最简单的办法，把inline-block写在一行，标签之间没有换行或者空格。

<div>        
	<span style="background-color: red;">1</span><span style="background-color: blue;">2</span>    
</div>

2. 设置字体大小为0
   设置这些inline-block标签的字体大小为0，适用于标签中没有字的情况

3. 设置父元素display:table和word-spacing:0

div{            
	width: 200px;            
	display: table;            
	word-spacing: 0;        
}