用并列几个行内元素时，经常的遇到默认间隙问题，现在来看一下遇到的场景：
遇到间隙的场景：
<style>
span {background-color: red;}
</style>
<body>
<div>
<span>行内元素</span>
<span>行内元素</span>
<span>行内元素</span>
</div>
</body>页面显示以下结果：（可以清楚的看到间隙，注意，这也不是元素的内外边距哦）
解决办法有以下几种：
方法1：（让行内元素不换行，此方法在代码量比较少的时候适用；代码量多的话，会感觉代码结构不清晰）
<style>
span {background-color: red;}
</style>
<body>
<div>
<span>行内元素</span><span>行内元素</span><span>行内元素</span>
</div>
</body>页面显示以下结果：
方法2：（用浮动的方法解决，此处会涉及另一个清除浮动的问题）
<style>
span {
background-color: red;
float: left;
}
</style>
<body>
<div>
<span>行内元素</span>
<span>行内元素</span>
<span>行内元素</span>
</div>
</body>页面显示以下结果：
方法3：（父元素字符大小设置为0，再给子元素添加字符大小）
<style>
div {
font-size: 0;
}
span {
font-size: 16px;
background-color: red;
}
</style>
<body>
<div>
<span>行内元素</span>
<span>行内元素</span>
<span>行内元素</span>
</div>
</body>页面显示以下结果：
938
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
