CSS Text Spacing

2025 年 1 月 12 日 | 9 分钟阅读

CSS 文本间距通过 CSS 属性来维护和添加单词、行、所有单词和任意两个字母之间的间距。我们可以使用外部、内部和内联样式标签来设计单词格式和间距。文本中的间距有助于增加长度，使网页上的文本更具可读性。有四种方法可以使用 CSS 属性添加文本间距。

所有字母之间的间距
任意两个字母之间的间距
单词之间的间距
行之间的间距
文本第一行的间距

所有字母之间的间距

所有字母之间的间距是通过 CSS 属性 `letter-spacing` 创建的。此属性适用于关键字（`normal`）、像素值（`10px`）和 `em` 值（`0.25em`）。我们可以将正负值与 `letter-spacing` 属性一起使用。

语法

语法显示了在 CSS 中使用 `letter-spacing`。

<style>
.class_name{
letter-spacing : 10px;
/* OR */
letter-spacing : 0.25em;
}
</style>

示例

以下示例展示了 CSS 中所有字母之间的间距。该示例使用不同 `letter-spacing` 值，包括正值和负值。

示例 1

该示例展示了使用 CSS `letter-spacing` 属性在所有字母之间创建的基本间距。在这里，我们可以使用正值来设置文本间距。

<!DOCTYPE html>
<html>
<head>
<title> CSS text spacing
</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color: #F4F2F2;
height:310px;
border : 2px solid grey;
letter-spacing: 8px;
}
.flex-containers{
letter-spacing: 0.25em;
}
</style>
</head>
<body>
<div class = "main_div">
<h3> CSS text spacing </h3>
<h5> Spacing between all letters using letter spacing property </h5>
<div class = "flex-containers">
<p class = "clip"> First paragraph </p>
<p class = "clip2"> second paragraph </p>
<b class = "clip3"> First bold information </b>
<p class = "clip"> Third paragraph </p>
<p class = "clip2"> Fourth paragraph </p>
<p class = "clip2"> Fifth paragraph </p>
</div>
</div>
</body>
</html>

输出

输出显示了 HTML 页面上所有字母的间距。

示例 2

该示例展示了使用 CSS `letter-spacing` 属性在所有字母之间创建的基本间距差异。在这里，我们可以使用负值来设置文本间距。

<!DOCTYPE html>
<html>
<head>
<title> CSS text spacing
</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color: #F4F2F2;
height:310px;
border : 2px solid grey;
letter-spacing: 5px;
}
.flex-containers{
letter-spacing: 0.15em;
}
.clip2{
letter-spacing: -1px;
}
b{
letter-spacing: -0.09em;
}
</style>
</head>
<body>
<div class = "main_div">
<h3> CSS text spacing </h3>
<h5> Spacing between all letters using letter spacing property </h5>
<div class = "flex-containers">
<p class = "clip"> First paragraph </p>
<p class = "clip2"> second paragraph </p>
<b class = "clip3"> First bold information </b>
<p class = "clip4"> Third paragraph </p>
<p class = "clip2"> Fourth paragraph </p>
<p class = "clip2"> Fifth paragraph </p>
</div>
</div>
</body>
</html>

输出

输出显示了 HTML 页面上所有字母的间距。

单词之间的间距

文本之间的间距是通过 CSS 属性 `word-spacing` 创建的。文本间距属性适用于关键字（`normal`）、像素值（`10px`）和 `em` 值（`0.25em`）。我们可以将正负值与 `word-spacing` 属性一起使用。

语法

语法显示了在 CSS 中使用 `word-spacing`。

<style>
element{
word-spacing : 10px;
/* OR */
word-spacing : 0.25em;
}
</style>

示例

以下示例展示了 CSS 中所有单词之间的间距。该示例使用不同 `word-spacing` 值，包括正值和负值。

示例 1

该示例展示了使用 CSS `word-spacing` 属性在所有单词之间创建的基本间距。在这里，我们可以使用正值来设置单词间距。

<!DOCTYPE html>
<html>
<head>
<title> CSS text spacing
</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color: #F4F2F2;
height: 310px;
border : 2px solid grey;
word-spacing: 12px;
}
.flex-containers{
word-spacing: 0.35em;
}
</style>
</head>
<body>
<div class = "main_div">
<h3> CSS text spacing </h3>
<h5> Spacing between all words using word spacing property </h5>
<div class = "flex-containers">
<p class = "clip"> First paragraph </p>
<p class = "clip2"> second paragraph </p>
<b class = "clip3"> First bold information </b>
<p class = "clip"> Third paragraph </p>
<p class = "clip2"> Fourth paragraph </p>
<p class = "clip2"> Fifth paragraph </p>
</div>
</div>
</body>
</html>

输出

输出显示了 HTML 页面上所有单词的间距。

示例 2

该示例展示了使用 CSS `word-spacing` 属性在所有单词之间创建的基本间距差异。在这里，我们可以使用负值来设置单词间距。

<!DOCTYPE html>
<html>
<head>
<title> CSS text spacing
</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color: #F4F2F2;
height:310px;
border : 2px solid grey;
word-spacing: 15px;
}
.flex-containers{
word-spacing: 0.25em;
}
.clip2{
word-spacing: -3px;
}
b{
word-spacing: -0.19em;
}
</style>
</head>
<body>
<div class = "main_div">
<h3> CSS text spacing </h3>
<h5> Spacing between all words using word spacing property </h5>
<div class = "flex-containers">
<p class = "clip"> First paragraph </p>
<p class = "clip2"> second paragraph </p>
<b class = "clip3"> First bold information </b>
<p class = "clip4"> Third paragraph </p>
<p class = "clip2"> Fourth paragraph </p>
<p class = "clip2"> Fifth paragraph </p>
</div>
</div>
</body>
</html>

输出

输出显示了 HTML 页面上所有单词的间距。

行之间的间距

文本行之间的间距是通过 CSS 属性 `line-height` 创建的。我们可以使用关键字（`normal`）、像素值（`10px`）和 `em` 值（`0.25em`）来设置属性。我们可以在内联、内部和外部属性中使用正负值来设置行高。

语法

语法显示了在 CSS 中使用 `letter-spacing`。

<style>
.class_name{
letter-spacing : 10px;
/* OR */
letter-spacing : 0.25em;
}
</style>

示例

以下示例展示了 CSS 中行高的间距。该示例使用不同行高间距值，包括正值和负值。

示例 1

该示例使用 CSS 来显示行高或两行之间的间距。在这里，我们为所有容器的文本行之间使用行高。

<!DOCTYPE html>
<html>
<head>
<title> CSS text spacing
</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color: aqua;
height:310px;
border : 2px solid grey;
line-height: 25px;
}
</style>
</head>
<body>
<div class = "main_div">
<h3> CSS text spacing </h3>
<h5> Spacing between text lines using CSS property </h5>
<div class = "flex-containers">
<p class = "clip"> First paragraph </p>
<p class = "clip2"> second paragraph </p>
<b class = "clip3"> First bold information </b>
<p class = "clip4"> Third paragraph </p>
<p class = "clip2"> Fourth paragraph </p>
</div>
</div>
</body>
</html>

输出

输出显示了 HTML 页面上的行高。

示例 2

该示例使用 CSS 来显示行高或两行之间的间距。在这里，我们为所有必需元素的文本行之间使用行高。

<!DOCTYPE html>
<html>
<head>
<title> CSS text spacing
</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color: aqua;
height: 250px;
border : 2px solid grey;
line-height: -25px;
}
h3{
line-height: -25px;
}
.clip{
line-height: 15px;
}
.clip2{
line-height: 1px;
}
</style>
</head>
<body>
<div class = "main_div">
<h3> CSS text spacing </h3>
<h5> Spacing between text lines using CSS property </h5>
<div class = "flex-containers">
<p class = "clip"> First paragraph </p>
<p class = "clip2"> second paragraph </p>
<b class = "clip3"> First bold information </b>
<p class = "clip4"> Third paragraph </p>
<p class = "clip2"> Fourth paragraph </p>
</div>
</div>
</body>
</html>

输出

输出显示了 HTML 页面上的行高。

示例 3

该示例展示了使用 CSS 内联元素设置两行之间的行高。在这里，我们为所需的标签的文本之间使用行高。

<!DOCTYPE html>
<html>
<head>
<title> CSS text spacing
</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color: aqua;
height: 300px;
border : 2px solid grey;
}
</style>
</head>
<body>
<div class = "main_div">
<h3 style = "line-height: 55px;"> CSS text spacing </h3>
<h5> Spacing between text lines using CSS property </h5>
<div class = "flex-containers">
<p class = "clip" style = "line-height: 5px;"> First paragraph </p>
<p class = "clip2"> second paragraph </p>
<b class = "clip3" style = "line-height:02em;">  First bold information </b>
<p class = "clip4"> Third paragraph </p>
<p class = "clip2"> Fourth paragraph </p>
</div>
</div>
</body>
</html>

输出

输出显示了 HTML 页面上的行高。

任意两个字母之间的间距

我们可以使用 CSS 属性在两个字母之间创建间距。为字母添加 `span` 标签，并使用 `letter-spacing` 属性及其值。我们可以为特定的标签文本创建间距。

示例

以下示例展示了 CSS 中两个字母之间的间距及其高度。该示例使用不同类型的间距值，包括正值和负值。

示例 1

该示例展示了使用 CSS 在两个字母之间创建间距。在这里，我们为所有容器的文本或单词之间使用间距。

<!DOCTYPE html>
<html>
<head>
<title> CSS text spacing
</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color: #F4F2F2;
height:310px;
border : 2px solid grey;
}
span{
word-spacing: 55px;
}
</style>
</head>
<body>
<div class = "main_div">
<h3> CSS text spacing between two word </h3>
<h5> Spacing between <span> two </span> words using CSS property </h5>
<div class = "flex-containers">
<p class = "clip"> <span> First </span> paragraph </p>
<p class = "clip2"> <span style = "word-spacing: 15px;"> second </span> paragraph </p>
<b class = "clip3"> First <span> bold  information </span> </b>
<p class = "clip4"> Third paragraph </p>
<p class = "clip2"> Fourth paragraph </p>
</div>
</div>
</body>
</html>

输出

输出显示了 HTML 页面上两个单词之间的间距。

示例 2

该示例使用 CSS 来显示两行或两个单词之间的行高或间距。

<!DOCTYPE html>
<html>
<head>
<title> CSS text spacing
</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color: #F4F2F2;
height:310px;
border : 2px solid grey;
}
span{
letter-spacing: 15px;
}
</style>
</head>
<body>
<div class = "main_div">
<h3> CSS text spacing and line height between two words </h3>
<h5> Spacing between <span> two </span> words using CSS property </h5>
<div class = "flex-containers">
<p class = "clip"> <span> First </span> paragraph </p>
<p class = "clip2"> <span style = "line-height: 55px;"> second </span> paragraph </p>
<b class = "clip3"> First <span> bold information </span> </b>
<p class = "clip4"> Third paragraph </p>
<p class = "clip2"> Fourth paragraph </p>
</div>
</div>
</body>
</html>

输出

输出显示了 HTML 页面上的行高。

文本第一行的间距

CSS `text-indent` 属性为网页上文本的第一行添加间距。我们可以选择容器或标签，并操作 `text-indent` 属性为第一行创建间距。

语法

语法显示了在 CSS 中使用第一行间距。

<style>
.class_name{
text-indent : 10px;
/* OR */
text-indent : 0.25em;
}
</style>

示例

以下示例展示了 CSS 中文本第一行的间距。该示例使用各种类型的间距值，包括正值和负值。

示例 1

该示例使用 CSS 来显示两行之间的行高或间距。在这里，我们为整个容器的文本行之间使用行高。

<!DOCTYPE html>
<html>
<head>
<title> CSS text spacing
</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color: #F4F2F2;
height:310px;
border : 2px solid grey;
text-indent: 25px;
}
</style>
</head>
<body>
<div class = "main_div">
<h3> CSS text spacing </h3>
<h5> Spacing of the first text line using CSS property </h5>
<div class = "flex-containers">
<p class = "clip"> First paragraph. <br> 
The CSS text-indent property adds space to the first line of the text on the web page. 
</p>
<p class = "clip2"> second paragraph </p>
<b class = "clip3"> First bold information </b> <br>
<b class = "clip3"> second bold information </b>
<p class = "clip4"> Third paragraph </p>
<p class = "clip2"> Fourth paragraph </p>
</div>
</div>
</body>
</html>

输出

输出显示了 HTML 页面上的第一行文本间距。

示例 2

该示例展示了段落中单词第一行之间的间距。

<!DOCTYPE html>
<html>
<head>
<title> CSS text spacing
</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color: #F4F2F2;
height:310px;
border : 2px solid grey;
}
</style>
</head>
<body>
<div class = "main_div">
<h3 style = "text-indent:05em;"> CSS text spacing </h3>
<h5> Spacing of the first text line using CSS property </h5>
<div class = "flex-containers">
<p class = "clip" style = "text-indent:25px;"> First paragraph. <br> 
The CSS text-indent property adds space to the first line of the text on the web page. 
</p>
<p class = "clip2"> second paragraph </p>
<b class = "clip3"> First bold information </b> <br>
<b class = "clip3" style = "text-indent:25px;"> second bold information </b>
<p class = "clip4"> Third paragraph </p>
<p class = "clip2" style = "text-indent:-25px;"> Fourth paragraph </p>
</div>
</div>
</body>
</html>

输出

输出显示了 HTML 页面上的行高。

结论

总而言之，CSS 文本间距属性有助于显示具有吸引力且用户友好的内容和信息。它在网页上看起来更具可读性和视觉吸引力。

下一个主题CSS MCQ

← 上一篇下一个 →

CSS Text Spacing

所有字母之间的间距

示例

单词之间的间距

示例

行之间的间距

示例

任意两个字母之间的间距

示例

文本第一行的间距

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS Text Spacing

所有字母之间的间距

示例

单词之间的间距

示例

行之间的间距

示例

任意两个字母之间的间距

示例

文本第一行的间距

示例

结论

相关帖子

Conditional Formatting in CSS

CSS Display Table

CSS Table Alternate Row Color

CSS Child Selector

CSS Align Self

如何使用 CSS 选择所有子元素（递归）

如何在 CSS 中设置背景图片的透明度

用 CSS 制作麻雀

CSS Button Click Effect

如何删除 CSS 中的滚动条

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器