解决inline-block元素的 3个bug

在使用inline-block时，有时候出现的效果莫名奇妙，例如：

• 两个inline-block 元素之间如果有空格、回车、tab，那么在页面上就有一个空隙
• 两个不同高度的 inline-block 元素顶部无法对齐，或者使用inline-block下面无缘无故多出几像素

例子1,出现空隙

效果：

解决方法

1.去掉空格

2. 添加父元素，将父元素的 font-size 设置为0，然后在 inline-block 元素中将 font-size 设置为 14px

3. 使用margin-right

4. 添加父元素，使用letter-spacing（该属性增加或减少字符间的空白（字符间距））

5. 使用word-spacing （该属性增加或减少单词间的空白（即字间隔））

解决效果：

例子2，设置inline-block 后，莫名其妙出现一些空白

效果

解决方法

使用vertical-align

解决效果

例子3，两个不同高度的 inline-block 元素顶部无法对齐

效果

解决方法

还是使用vertical-align

解决效果