一、行内标签元素出现问题
<body>
<style>
span { background:red; }
</style>
<span>行内元素</span>
<span>行内元素</span>
<span>行内元素</span>
</body>
页面显示结果
20180428093506740.png
这时就会发现出现，标签之间出现了间隙。
二、行内块标签元素出现问题
行内块标签元素出现的比较多的是在表单元素了。
<body>
<style>
button { background:red; border:none; }
</style>
<button>行内块元素</button>
<button>行内块元素</button>
<button>行内块元素</button>
</body>
页面显示结果
20180428094143272.png
同样的，行内块标签之间也出现了间隙。
三、解决方案
会出现间隙的原因，其实是行内标签元素，行内块元素之间的换行带来的影响。只要解决了换行的问题，也就解决了间隙的问题。
1.方案一
<body>
<body>
<style>
span { background:red; }
</style>
<span>行内元素</span><span>行内元素</span><span>行内元素</span>
</body>
页面显示结果
20180428094908925.png
这个时候就没有间隙了。
2.方案二
<body>
<style>
span { background:red; }
</style>
<span>行内元素</span
><span>行内元素</span
><span>行内元素</span>
</body>
页面显示结果
20180428094908925.png
3.方案三
<body>
<style>
span { background:red; }
</style>
<span>
行内元素</span><span>
行内元素</span><span>
行内元素</span>
</body>
页面显示结果
20180428094908925.png
4.方案四
<style>
span { background:red; font-size:16px;}
</style>
<body>
<span>行内元素
<span>行内元素
<span>行内元素
</body>
页面显示结果
20180428094908925.png
tip：以上四种方案兼容所有常规浏览器。
5.方案五（把父级font-size设置为0）
<style>
body { font-size:0; }
span { background:red; font-size:16px;}
</style>
<body>
<span>行内元素</span>
<span>行内元素</span>
<span>行内元素</span>
</body>
页面显示结果
20180428094908925.png
tip：方案四在IE7,及IE7下还是会出现间隙。在safari浏览器下也会出现间隙。
