letter-spacing 字间距

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

1. 官方定义

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

2. 解释

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

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

3. 语法

.demo{
    letter-spacing: value;
}

值说明

参数名称	参数类型
value	‘px’

通过上面图片，我们可以看到从左到右每个字符的右侧都增加了 10px。

4. 兼容性

IE	Edge	Firefox	Chrome	Safari	Opera	ios	android
all	all	all	all	all	all	all	all

5. 实例

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

.demo{
    letter-spacing:5px;
}

效果图

字符之间增加 5px 的间距效果图

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

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

效果图

设置字符之间距离为 -2px 效果图

通过使用 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
}

效果图

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

上图是 span 只设定了 display: inline-block;，下图我们通过在父级元素上设置letter-spacing去除了span 之间空格的距离。而在span中又重置了letter-spacing让文字恢复了它们之间的距离，让其不在拥挤。不过我们不推荐这种方式，建议内联块级元素不要分行。