inline-block布局出现间隙问题

inline-block引发间隙是包括换行在内的空白符。

问题1：上边距产生1px间距（如图）。

1.完美解决方案：

设置vertical-align:top。（vertical-align这个是设置元素的垂直排列的， 用来定义行内元素的基线相对于该元素所在行的基线的垂直对齐；top就是垂直对齐文本的顶部 。）

2.不完美解决方案：

整个div设置height

每个li里设置line-height ，line-height比height小1px；这样设置，下端对齐但是上端然有1px间距。

 

问题二：左右空白边距  ：

解决方案1：

既然间距产生是由包括换行在内的空白符引起的，那我们可以在html布局时，把运用了inline-block的元素内部的代码敲在一行里，不换行。（比较麻烦）

解决方法2：

把运用了inline-block的元素设置font-size：0， 子标签里再设置字体大小。

第一次写，有错误望 指正，希望不会误人子弟。