解决inline-block引起的空白间距问题

当我们在对元素的display属性使用inline-block值时，会在元素间形成一定宽度的空白间距。

看一段代码：

  
  
  
  
  
  
  
  
  
1
  
2
  
3
  
  
  
  

页面效果如下图所示：

仔细看一下代码，估计我们很难发现空白间距产生的原因。其实产生空白间距的原因是我们编码的习惯照成的，我们习惯在标签结束处敲一个回车，然而回车会产生回车符，相当于空白符。当多个空白符连续使用时，会合并成一个空白符。正是这个习惯照成了空白间隔。

那么，我们应该解决呢？编者在这里想到了两个不错的解决办法。

1、从html结构入手

改变后的源代码如下所示：

  
1
  
2
  
3
  
  
  
  
  
1
  
2
  
3
  
  
  
  
1
2
3
  
  

2、使用css

空白符也是字符，我们可以把父元素的字体大小设为0，这样空白符也就消失了。

ul{  
    font-size:0px;  
}  

运行结果如下所示：

可以了！

转自：http://blog.csdn.net/annsheshira23/article/details/47760363