letter-spacing 字间距
当我们需要扩大或者减少字符之距离时候,会用到这个。如果我们需要调整字符距离可以用到这个。
letter-spacing 或减少字符空白(字符间距)。
该定义了在文本字符框之间插入多少空间。由于字符字形通常比其他字符框要窄,指定长度值时,会调整字母之间通常的间隔。因此,normal 就相当于值为 0。
这个常用来之距离,它允许为负值,认的字符距离为 0。如果数值小于 0 字符会紧凑,大于 0 时越大越松散。
.demo{
letter-spacing: value;
}
值说明
通过上面,我们可以看到从左到右每个字符的右侧都了 10px。
.demo{
letter-spacing:px;
}
图
.demo{
letter-spacing:-px;
}
图
<div class="demo">
<span>网</span>
<span>学习</span>
</div>
.demo{
letter-spacing:-px;
}
.demo>span{
display: inline-block;
width: px;
background: red;
letter-spacing:normal
}
图
上图是 span 只设定了 display: inline-block;
,下图我们通过 在父级元素上设置letter-spacing
了span
之间空格的距离。而在span
中又重置了letter-spacing
让恢复了它们之距离,让其不在拥挤。不过我们不推荐这种方式,建议内联块级元素不要分行。
与 word-spacing 的区别:
word-spacing
这个只能作用英文,意思是两个英文单词之距离,这里要注意是‘英文单词’而不是‘字符’,而 letter-spacing
没有任何限制可以作用于‘任何字符’。
这个仅仅对字符起作用,不能作用于元素上面。
这个不可以是 % 这样的计量单位,因为它不是距离,没有相对点,浏览器不知道该如何解释。