怎么解决行内元素间隙bug问题
行内元素之间会产生间隙bug问题,怎么解决?使用font-size:0解决方法试验过,并没有起到作用是为什么?
行内元素之间会产生间隙bug问题,怎么解决?使用font-size:0解决方法试验过,并没有起到作用是为什么?
2016-03-15
文/坏小朱啦啦(简书作者)
原文链接:http://www.jianshu.com/p/50e6cb9aeed6
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。
行内元素之间会产生间隙bug问题的场景:
1、当行内元素之间有“回车”、“tab”、“空格”时就会出现间隙。
如下代码:
<div>
<a>1</a>
<a>22</a>
<em>333</em>
</div>
解决办法有两种
方法一:将元素写成一行,中间不换行;
<div><a>1</a><a>22</a><em>33</em></div>
方法二:设置font-size:0
div{font-size:0px;}
a,em{font-size:10px;}
方法三:可以为元素设置负margin值,一般为-4,但是根据父级元素的font-size会有相应的变化,使得元素间隙消失
a,em{font-size:10px;margint-right:-4px;}
这个方法对于盒模型比较怪异的IE6/7来说另当别论。
方法四:省略闭合符号
<div>
<a>1
<a>22
<em>333
</div>
当然,还有让内联元素浮动float:left;的办法,此时父级容器需要设置宽高,才好定位内联元素的位置。感兴趣的朋友可以一试。
举报