1、首先我们随便创建一个基础的简单网页,页面就只有一个div,然后里面是一大串文字。如下:
测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距
2、此时我们运行这个问题网页,查看他的默认效果,可以看到他的文本是紧挨着的,几乎没有距离。
3、对于这种情况,我们肯定要解决这个问题,不然太难看了,领导与客户那里都不好交差啊。那么如何解决呢?其实很简单,只需要设置一个letter-spacing的属性即可。如下letter-spacing:8px;代码如下:divletter-spacing:8px;
测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距
4、然后我们来看下运行效果,很明显,现在的字体间的距离已经大了不少,比那个密集的状态要好看好多。
5、关于间距单位,我上面设置的是px,实际上你还可以用em等来表示。而且更好点个人感觉px表示像素 (计算机屏幕上的一个点:1px = 1/96in),是绝对单位 ,不会因为其他元素的尺寸变化而变化。em表示相对于父元素的字体大小。em是相对单位 ,没有一个固定的度量值,而是由其他元素尺寸来决定的相对值。相对而言,em可以用于响应式字体大小的单位,感觉很不错,当然,具体的还是得看你的具体需求。然后下面是我用一个em作为单位设置字符间距的一个例子,divletter-spacing:1em;
测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距
6、效果如图所示,也不错,特别是我只设置了一个em就几乎赶得上上面的8px了:
7、然后letter-spacing属性是支持大部分主流浏览器的,如下: