内联元素间的间隔

问题描述：

内联元素间会出现不是由margin引起的间隔，具体如下描述：

HTML：

<div>
  <span>a</span>
  <span>b</span>
  <span>c</span>
  <span>d</span>
</div>

CSS:

*{margin:0;padding:0;}
span{
  background-color: #ddd;
}

以上代码的结果为：

通过调试，发现各个span间没有margin，也不存在任何其他元素，但却有间隔。

解决方案：

      span间的间隔是由span标签间存在空格、tab、换行字符导致，故有如下两种解决方案。

1）删掉空格等字符：既然间隔是空格等导致，删掉或用注释连接。如下：

删掉空格
<div>
  <span>a</span><span>b</span><span>c</span><span>d</span>
</div>
用注释连接
<div>
  <span>a</span><!--
  --><span>b</span><!--
  --><span>c</span><!--
  --><span>d</span>
</div>

2）空格、tab、换行均为字符，故其大小与font-size有关。根据实践发现将父元素div的font-size调大，间隔也会变大。因此，可以通过将div的font-size设为0，即可消除间隔。然而font-size是可继承属性，此时span的font-size也为0，span的内容将无法显示，此时只需单独为span设置font-size即可。

即解决办法为：将父元素font-size设置为0，并为内联元素单独设置font-size。

div{
    font-size:0;
} 
span{
  font-size:20px;
  background-color: #ddd;
}

以上代码的显示结果如下，间隔被消除。

内联元素间的间隔

原文：http://www.cnblogs.com/youhong/p/6486033.html