内敛元素间隙问题

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

当行内元素之间有“回车”、“tab”、“空格”时就会出现间隙。
注:常见的行内元素有:img、span、a、b等

解决方法

  • 写在一行,之间不要有空格之类的符号

(不建议,代码混乱,不直观)

<div>
<a>1</a><a>2</a><span>33333</span><span>44444</span><em>555555</em>
</div>
  • 父元素设置font-size:0,然后内敛元素上再设置具体的字体大小。
div{font-size:0;}
span{font-size:16px;}
  • float浮动

个人认为最直接的方法,当然是在适当的场景中,因为过度的浮动会产生需要清除浮动的必要

如有更好的方法欢迎大家留言,谢谢~~~

    原文作者:cdgogo
    原文地址: https://segmentfault.com/a/1190000019623766
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞