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

CSS笔记 专栏收录该内容
20 篇文章 1 订阅

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

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值