内联元素空隙问题

最近写一个页面的时候发现，内联元素之间会有几像素的空隙，既不是margin也不是padding，最终发现是由于换行符、制表符（tab）、空格等字符引起的。

<div>
    <span>内联元素</span>
    <span>内联元素</span>
    <span>内联元素</span>
    <span>内联元素</span>
    <span>内联元素</span>
</div>

总结一下解决方案：

方法一：既然是由于行符、制表符（tab）、空格等字符引起，那么就去掉内联元素之间的行符、制表符（tab）、空格，但这样代码会比较难看

方法二：用HTML注释代替换行

<div>
    <span>内联元素</span><!-- 
     --><span>内联元素</span><!-- 
     --><span>内联元素</span><!-- 
     --><span>内联元素</span><!-- 
     --><span>内联元素</span>
</div>

方法三：设置margin-right为负值，需要考虑上下文的字体和文字大小，不建议这样做

方法四：给内联元素的父级设置font-size：0

div {
    font-size: 0px;
}
span {
    background: pink;
    font-size: 10px;
}

其中IE6 7下始终存在1px的空隙，需要使用word-spacing减少单词间的空白（即字间隔） word-spacing:-1px;

另外，加了浮动内联元素是不会有这个空隙的。

转载于:https://www.cnblogs.com/jacobb/p/kongxxi.html