使用display:inline-block布局的注意点

用了display:inline-block后，存在间隙问题

这个问题产生的原因是换行引起的，因为我们写标签时通常会在标签结束符后顺手打个回车，而回车会产生回车符，回
车符相当于空白符，通常情况下，多个连续的空白符会合并成一个空白符，而产生“空白间隙”的真正原因就是这个让我
们并不怎么注意的空白符。

去除空隙的方法：

1.去掉 回车；
2.对父元素添加，{font-size:0}，即将字体大小设为0，那么那个空白符也变成0px，从而消除空隙，在子元素上重置正
确的font-size；
3.设置子元素margin值为负数；
缺点：元素之间间距的大小与上下文字体大小相关；并且同一大小的字体，元素之间的间距在不同浏览器下是不一样
的，如：font-size:16px时，Chrome下元素之间的间距为8px,而Firefox下元素之间的间距为4px。所以不同浏览器下
margin-right的负值是不一样的，因此这个方法不通用。
4.为inline-block元素添加样式float:left；
	缺点：float布局会有高度塌陷问题
5.最优解在这，设置父元素，display:table和word-spacing；