css控制字符间距的方法 – 珊瑚贝

方法1：使用letter-spacing属性控制–字符间距

letter-spacing 属性增加或减少字符间的空白，该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄，指定长度值时，会调整字母之间通常的间隔。因此，normal 就相当于值为 0。

letter-spacing将每一个中文文字作为一个“字”，而每一个英文字母也作为一个“字”！

示例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            .p1{
                letter-spacing:normal;
            }
            .p2{
                letter-spacing:10px;
            }
        </style>
    </head>

    <body>
        <div class="demo">
            <p class="p1">我们的网址是：https://www.02405.com！</p>
            <p class="p2">我们的网址是：https://www.02405.com！</p>
        </div>
    </body>
</html>

方法2：使用word-spacing属性控制–单词的间距

word-spacing 属性增加或减少单词间的空白；在这个属性中，“字” 定义为由空白符包围的一个字符串。

也就是说该属性是以空格为基准进行调节间距的：

如果多个字母被连在一起，则会被word-spacing视为一个单词；
如果汉字被空格分隔，则分隔的多个汉字就被视为不同的单词，word-spacing属性此时有效。

示例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            .p1{
                word-spacing:normal;
            }
            .p2{
                word-spacing:20px;
            }
        </style>
    </head>

    <body>
        <div class="demo">
            <p class="p1">我们的网址是：https://www.02405.com！</p>
            <p class="p2">我们 的 网址是：https://www.02405.com！</p>
        </div>
    </body>
</html>