1、首先新建一个html文件，命名为test.html，在test.html文件内，使用p标签创建一行文字，文字内容为“这是一段测试的文字”。
2、然后在test.html文件内，设置p标签的class属性为txt，主要用于下面通过该class来设置css样式。
3、接着在test.html文件内，编写<style type="text/css"></style>标签，页面的css样式将写在该标签内。
4、在test.html文件内，在css标签内，以“.类名”的形式来设置p标签的样式。
5、在css标签内，使用letter-spacing属性设置文字的间距，间距值的单位可以是px，rem，cm等css单位。例如，这时设置文字间隔为20px。
6、最后在浏览器打开test.html文件，查看实现的效果，如下图所示就完成了。
CSS 中控制横向文字间距的属性有两个，一个是字符与字符之间的间距 letter-spacing. 另一个是词与词之间的间距 word-spacing。二者可接受的属性值均为以下四种：
normal: 默认间距（letter-spacing 默认值为 0，word-spacing 默认值为 0.25em）initial: 设置为默认间距
inherit: 继承当前元素父元素的属性值
或自定义值（以 px, pt, cm, em 等为单位的值，可为负值）.
例子如下：
<!DOCTYPE html><html>
<head>
<title>Example</title>
<meta charset="utf-8"/>
<style>
#word_space_normal {
word-spacing: normal
}
#word_space_inherit {
word-spacing: inherit
}
#word_space_initial {
word-spacing: initial
}
#word_space_custom {
word-spacing: 20px
}
#word_space_negative {
word-spacing: -10px
}
#word_space_chinese {
word-spacing: -10px
}
#letter_space_normal {
letter-spacing: normal
}
#letter_space_inherit {
letter-spacing: inherit
}
#letter_space_initial {
letter-spacing: initial
}
#letter_space_custom {
letter-spacing: 5px
}
#letter_space_negative {
letter-spacing: -3px
}
#letter_space_chinese {
letter-spacing: -3px
}
</style>
</head>
<body>
<div id="word_space_normal">
A sentence with normal word spacing.
</div>
<div id="word_space_initial">
A sentence with initial word spacing.
</div>
<div id="word_space_custom">
A sentence with custom defined word spacing.
<div id="word_space_inherit">
A sentence with inherited word spacing.
</div>
</div>
<div id="word_space_negative">
A sentence with negative word spacing.
</div>
<div id="word_space_chinese">
使用 word-spacing 属性的中文。
</div>
<hr/>
<div id="letter_space_normal">
A sentence with normal letter spacing.
</div>
<div id="letter_space_initial">
A sentence with initial letter spacing.
</div>
<div id="letter_space_custom">
A sentence with custom defined letter spacing.
<div id="letter_space_inherit">
A sentence with inherited letter spacing.
</div>
</div>
<div id="letter_space_negative">
A sentence with negative letter spacing.
</div>
<div id="letter_space_chinese">
使用 letter-space 属性的中文。
</div>
</body>
</html>
输出为：
可以观察到，word-spacing 属性的设置不影响字母与字母的间距，也不影响中文等词汇之间无须空格的语言的字间距，而 letter-spacing 属性的设置则会同时影响字符间距以及单词间距，且同时作用于所有语言。
使用“letter-spacing”属性来设置字与字间距_字符间距离，例如对一个标签div设置css属性样式为letter-spacing:8px；那么此标签中字与字间距即为8px，行如：“字 间 距”。
