桂林一枝花 发表于 2017-7-14 22:14:08

2个行内元素换行显示会出现一定的距离之解决办法

写HTML页面的时候大家都会遇到两个span元素显示在一行。他们两个中间有一点间距。有些人没注意。因为一般都不会显示在一起。。如果在一起的话,就用包裹在同一个span里面呗。。如果做移动端页面或者高精度页面的时候。 本着还原ui设计稿的思路出发。 那肯定会发现这个问题。。造成这个问题的原因是浏览器会解析换行符。目前提出常用的解决办法。
        <div>
                <span style="">标记名称</span>
                <span>标记级别</span>
        </div>


1. 把两个span写在一行 (不建议) ps:影响代码的美观与整洁

2.父元素的font-size: 0 (建议)

3. 第二个span使用margin-left: -4px (建议)ps: 那个间距与字体的大小有关。虽然可以解燃眉之急,但是对元素的控制不准确

4. 通过float也能够解决(不建议)没必要这么一点小事情就使用浮动,最后还得清除浮动,影响页面布局

5. 把第一个的span的 结束符号 > 写在下一个span的前面 (不建议) 影响代码的美观

ibcadmin 发表于 2017-7-15 23:30:16

+1
页: [1]
查看完整版本: 2个行内元素换行显示会出现一定的距离之解决办法