[学习交流] 【上海校区】span，a标签，label标签文字右边的1px空白的解...

最近在做一个这样的效果时注意到了一个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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

出来的效果是这样的：

我们用肉眼似乎无法观察出效果，所以我给这两个span分别加上红色和绿色的背景色以便于观察。
#span1 { background:#f00; }#span2 { background:#0f0; }

1
2
3
4
5
6

效果：

我们在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空白之外还要减去空格的宽度（空格宽度为字体大小的一半）。

---------------------本文来自幻想山外小楼听雨的CSDN 博客，全文地址请点击：https://blog.csdn.net/promiseCao ... 261?utm_source=copy

不二晨 · 不二晨

奈斯

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 【上海校区】span，a标签，label标签文字右边的1px空白的解...

1 个回复