span，a标签，label标签文字右边的1px空白的解决办法

最新推荐文章于 2024-09-10 08:58:47 发布

幻想山外小楼听雨

最新推荐文章于 2024-09-10 08:58:47 发布

阅读量6.2k

点赞数 1

分类专栏： CSS笔记文章标签： span margin 1px html css

本文链接：https://blog.csdn.net/promiseCao/article/details/52664261

版权

CSS笔记专栏收录该内容

19 篇文章 2 订阅

订阅专栏

最近在做一个这样的效果时注意到了一个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的七种方法总结和兼容性处理