当我们需要扩大或者减少字符之间的距离时候,会用到这个属性。如果我们需要调整字符间的距离可以用到这个属性。
官方定义
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 标签内的内容保持默认的间距。