浅谈inline-block及解决空白间距

去掉display:inline-block元素间的多余空白

如下一段代码，display:inline-block元素间的多余空白：

1. <style type="text/css">  
2. *{margin:0; padding:0;}   
3. body{font:12px/20px Tahoma, Geneva, sans-serif; padding:200px;}   
4. img {border:0;}   
5. ul li{ list-style:none;}   
6.   
7. .test{width:200px; border:1px blue solid;}   
8. .test a{width:32px; height:32px; display:inline-block; text-indent:-9999em; *text-indent:0; *line-height:0; *font-size:0; background:blue;} /* *号部分解决IE7 无法显示 display:inline-block 元素里面的内容，博客内有文章介绍 */   
9. </style>  
10. <div class="test">  
11.     <a href="#"></a>  
12.     <a href="#"></a>  
13.     <a href="#"></a>  
14.     <a href="#"></a>  
15.     <a href="#"></a>  
16. </div>  

运行截图：



会发现 每1个带display:inline-block;属性的链接 a 水平、垂直方向都带有一定的空白

解决方法：

方法1(附注释说明)：

1. .test{width:200px; border:1px blue solid; font-size:0;}      
2. .test a{width:32px; height:32px; display:inline-block; text-indent:-9999em; *text-indent:0; *line-height:0; *font-size:0; background:blue; vertical-align:top;} /* *号部分解决IE7 无法显示 display:inline-block 元素里面的内容，博客内有文章介绍 */     
3. /* display:inline-block元素的父元素定义 font-size:0 ,可去掉元素水平4px的空白，子元素若要显示文字可重新定义font-size属性即可 */     
4. /* display:inline-block元素本身定义 vertical-align 属性可去掉元素垂直方向的多余空白*/    

关键在于父元素定义font-size:0 去掉行内块元素水平方向空白；子元素定义vertical-align 属性去掉行内块元素垂直方向空白！
如果标签a内加上任意文字，则display:inline-block元素不会生成垂直方向有空白！

方法2(附注释说明)：

通过设置父元素 letter-spacing来解决的,该属性的值同字体有关： 如：.test{letter-spacing:-.25em} 要注意的是-.25em是字体设置为Arial时的情况，为其他字体时会有些不同，下面仅列出了常用的几个， 常用字体与letter-spacing的关系：

当我们使用 inline-block 的时候，就会产生“空白间隙”问题。代码如下：