span,a标签,label标签文字右边的1px空白的解决办法
来源:互联网 发布:广告录音软件 编辑:程序博客网 时间:2024/06/06 01:29
最近在做一个这样的效果时注意到了一个span的小细节——当span标签的内容最后一个字为中文时,会默认给文字右边留1px的空白像素(类似内填充,但是它无法清除)。这样就导致我们在计算两个span标签之间的margin时需要减去这1px,否则就会和设计效果出现几像素的误差。a标签和label标签也是一样,这里我们就不另外说了,各位自己去测试。
下面我来重现一下这1px误差是如何产生的:
首先我们写连个相连的span标签
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style type="text/css"> span { padding:0px; }</style></head><body><span id="span1">这是一个span标签</span><span id="span2">上一个标签之间会留白1px<span></body></html>
出来的效果是这样的:
我们用肉眼似乎无法观察出效果,所以我给这两个span分别加上红色和绿色的背景色以便于观察。
#span1 { background:#f00; }#span2 { background:#0f0; }
效果:
我们在ps下放大看:
很明显span1多了1像素(当然span2也有),而我在一开始就已经将span的padding设置为0了。所以它不是span的默认padding,但是这1像素是被计算在span的width中的。
总结:当span标签的内容最后一个字儿是中文时都会在文字背后留1px空白(有时候不止1px,后面会解释),它不是padding所以不能被清除。所以我们在切图时千万注意,两个span之间的margin计算方法为:
测量值-1px = 真实margin值
或者我们直接在量两个span之间间距的时候就少量1px。
那么这1px空白是怎么来的呢?其实浏览器在显示中文的时候为了美观会给每个字儿后面都留出1px间隙,有时候甚至不止1px可能是2px甚至更大这就和自字号还有字体有关系了。我们在确定这空白到底是几px时可以根据前面的文字与文字间的间隙来推断,如下图
为什么我要特别强调中文呢?肯定是因为span内容最后一个字儿是英文的话就不会出现这1px间隙了。
最后还要强调,不仅是span,a标签和label标签也会出现同样的状况,处理方法相同。另外我这里要实现的设计效果其实不用margin用word-sapcing会生方便,但是用word-spacing的话要注意除了减去这1px空白之外还要减去空格的宽度(空格宽度为字体大小的一半)。
所有博客已转移至个人博客地址:www.clramw.top
相关文章:span、a标签之间的换行空白问题
深度好文:清除浮动float的七种方法总结和兼容性处理
- span,a标签,label标签文字右边的1px空白的解决办法
- label和span标签设置宽度width无效的解决办法
- span、a标签之间的换行空白问题
- label、span标签小解
- <div>/<span>/<label>标签
- HTML中Div、span、label标签的区别
- HTML中Div、span、label标签的区别
- HTML中Div、span、label标签的区别
- HTML中Div、span、label标签的区别
- ie6 a标签背景图遮盖文字的解决办法
- 行级标签span a label 等 如何设置宽度
- <label></label>标签的作用。
- a标签与span标签
- 标签label的用法
- label(标签)的使用
- HTML的label标签
- label标签的使用
- label标签的使用
- 请求转发与重定向的区别
- 第三方库-Universal-Image-Loader
- 激情撸一发,“爱尚阅”app
- bat脚本_常见命令
- Activity生命周期
- span,a标签,label标签文字右边的1px空白的解决办法
- Java多线程
- POJ 1155
- C和指针读书笔记(第三章)
- task
- abap screen item
- 阿里一道机器人面试题。
- ADO.NET
- 指针和const