转：解决行内元素间隙bug问题

原文转自慕课网，链接：http://www.imooc.com/wiki/view?pid=138

 

行内元素之间会产生间隙bug问题的场景：

1、当行内元素之间有“回车”、“tab”、“空格”时就会出现间隙。

如下代码：

<div>
   <a>1</a>
   <a>2</a>
   <span>33333</span>
   <span>44444</span>
   <em>555555</em>
</div>

例子：http://www.imooc.com/code/2049

 

解决方法：

 1、写在一行，之间不要有空格之类的符号。

<div>
<a>1</a><a>2</a><span>33333</span><span>44444</span><em>555555</em>
</div>

 

2、使用font-size:0

div{font-size:0;}
a,span,em{font-size:16px;}