使用 letter-spacing 及清除空格效果

最新推荐文章于 2024-08-11 16:59:10 发布

原创最新推荐文章于 2024-08-11 16:59:10 发布 · 1.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css

前端同时被 2 个专栏收录

24 篇文章

订阅专栏

CSS

13 篇文章

订阅专栏

博客介绍了CSS中letter-spacing属性，其官方定义为增加或减少字符间空白。该属性可修改文字间距，允许为负值，默认间距为0，小于0字符紧凑，大于0则松散。还给出了增加间距、设置负间距及清除代码空格等实例。

当我们需要扩大或者减少字符之间的距离时候，会用到这个属性。如果我们需要调整字符间的距离可以用到这个属性。

官方定义

letter-spacing 属性增加或减少字符间的空白（字符间距）。

解释

该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其他字符框要窄，指定长度值时，会调整字母之间通常的间隔。因此，normal 就相当于值为 0。

这个属性常用来修改文字之间的距离，它允许为负值，默认的字符间的距离为 0。如果数值小于 0 字符会紧凑，大于 0 时越大越松散。

语法

.demo{		
    letter-spacing: value;
}

实例

1. 字符之间增加 5px 的间距。

.demo{
    letter-spacing:5px;
}

2. 设置字符之间距离为 -2px。

.demo{
    letter-spacing:-2px;
}

3. 通过使用 letter-spacing 清除我们编辑 html 代码时候元素设定 inline-block 之后出现的空格。

<div class="demo">
    <span>文本一</span>
    <span>文本二</span>
</div>

.demo{
    letter-spacing:-5px;
}
.demo>span{
    display: inline-block;
    width: 50px;
    background: red;
    letter-spacing:normal
}

上面代码中 span 只设定了 display: inline-block;，然后通过在父级元素上设置letter-spacing去除了 span 之间空格的距离。而在span中又重置了letter-spacing让文字恢复了它们之间的距离，让 span 标签内的内容保持默认的间距。