OMG~我才知道letter-spacing与word-spacing的区别?

前言：

在介绍区别之前，我想还是有很多人不知道该在什么场景下来应用该css属性吧，那我这里就来说一下我自己经常遇到的场景。相信在开发过程中，很多小伙伴都会遇到这个问题：

聪明的宝宝很快就可以看出来，由于label标签中的文字个数不一样，导致后面的input框不能对齐，这样就显得极其难看 。那有什么解决办法呢？？？回答是肯定的。那我一开始是这样想的的：我在姓名和年龄的中间加空格就好了呀，让名和龄与地对齐~

看到这里，我只能说想法很美好，现实很残酷，编辑器里明明已经实现了，那为什么浏览器里还是没有实现我们想要的结果呢？

原因是这样的：在编辑器中，我在姓名与年龄的中间都加了两个空格，但是实际上在浏览器中页面的显示中，只显示了一个空格，也就是说，不管你在代码中用了多少空格，浏览器中只会显示一个空格。所以，这种方法是行不通了~

换个方法：我们还可以用 &nbsp ;

经过使用，我发现两个&nbsp ;相当于一个空格，也就是说，你想使用50个空格，就得使用100个&nbsp ;这样看来，会不会太粗暴了？？？

那么接下来我们就可以使用比较好的方法 letter-spacing

经过对比会发现，这样实现的最简单，效果也是最好的。

我们将 letter-spacing 换成 word-spacing 之后，会发现并没有效果，这是为什么呢？？？

那我们就要知道他们的区别啦~

区别：

letter-spacing为每个字符之间的空白距离，word-spacing为单词之间的空白距离，很明显中文文字下用word-spacing是没有效果的，所以只能用letter-spacing。

不仅如此，letter-spacing 还可以设置为负值呢，可以让文字在水平方向上重叠~

另外，我还知道了letter-spacing的一个小妙用~可以消除inline-block元素间的换行空格间隙问题

<div>
    <img src="../images/1.jpg" alt="">
    <img src="../images/2.jpg" alt="">
</div>
<div style="letter-spacing:-5px">
    <img src="../images/1.jpg" alt="">
    <img src="../images/2.jpg" alt="">
</div>
复制代码

这个方法是不是炒鸡实用呢~

（大家会发现今天我的文章五颜六色的，因为我学会怎么用代码加颜色啦，哈哈哈啊开森）

转载于:https://juejin.im/post/5cf5caba518825710d2b0faf