letter-spacing 字间距
当我们需要扩大或者减少字符之 间的 距离时候，会用到这个 属性 。如果我们需要调整字符 间的 距离可以用到这个 属性 。
1. 官方定义
letter-spacing 属性 增加 或减少字符 间的 空白（字符间距）。
2. 解释
该 属性 定义了在文本字符框之间插入多少空间。由于字符字形通常比其他字符框要窄，指定长度值时，会调整字母之间通常的间隔。因此， nor mal 就相当于值为 0。
这个 属性 常用来 修改 文字 之 间的 距离，它允许为负值， 默 认的字符 间的 距离为 0。如果数值小于 0 字符会紧凑，大于 0 时越大越松散。
3. 语法
.demo {
letter-spacing : value ;
}
值说明
参数 名称 参数类型 @H_ 301 _67@ value ‘px’ | ‘rem’ | ‘em’
通过上面 图片 ，我们可以看到从左到右每个字符的右侧都 增加 了 10px。
4. 兼容性
IE Edge Firefox Chrome Safari Opera ios android @H_ 301 _67@ all all all all all all all all
5. 实例
字符之间 增加 5px 的间距。
.demo {
letter-spacing : px ;
}
效果 图
字符之间 增加 5px 的间距 效果 图
设置字符之间距离为 -2px。
.demo {
letter-spacing : -px ;
}
效果 图
设置字符之间距离为 -2px 效果 图
通过使用 letter-spacing 清除我们编辑 html 代码 时候元素设定 inline-block 之后出现的空格。
< div class = " demo " >
< span > 网 </ span >
< span > 学习 </ span >
</ div >
.demo {
letter-spacing : -px ;
}
.demo >span {
dis play : inline-block ;
width : px ;
background : red ;
letter-spacing : nor mal
}
效果 图
使用 letter-spacing 清除空格 效果 图
上图是 span 只设定了 dis play: inline-block; ，下图我们通过 在父级元素上设置 letter-spacing 去除 了 span 之间空格的距离。而在 span 中又重置了 letter-spacing 让 文字 恢复了它们之 间的 距离，让其不在拥挤。 不过我们不推荐这种方式，建议内联块级元素不要分行。
6. 经验 分享
与 word-spacing 的区别：
word-spacing 这个 属性 只能作用英文，意思是两个英文单词之 间的 距离，这里要注意是‘英文单词’而不是‘字符’，而 letter-spacing 没有任何限制可以作用于‘任何字符’。
7. 小结
这个 属性 仅仅对字符起作用，不能作用于元素 标签 上面。
这个 属性 不可以是 % 这样的计量单位，因为它不是 一个 距离，没有相对点，浏览器不知道该如何解释。
perspective 透视 ? ?word-wrap 文本换行查看更多关于letter-spacing 字间距的详细内容...