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, 子标签里再设置字体大小。
第一次写,有错误望 指正,希望不会误人子弟。