上查看所有课程
CSS 文本间距属性用于指定内容块中字符、单词和文本行之间的空间量。例如，
p {
line-height: 2;
}浏览器输出
这里，line-height: 2 将行高（两行之间的间距）设置为字体大小的两倍。
属性 各种文本间距属性
CSS 中使用的各种文本间距属性如下：
letter-spacingword-spacingtext-indentline-height
我们将详细了解它们中的每一个。
CSS letter-spacing 属性
CSS letter-spacing 属性用于控制元素文本中每个字母之间的间距。
letter-spacing 属性的语法如下：
letter-spacing: normal | length | initial | inherit;这里，
normal：字符之间的默认间距length：使用长度单位（如px、em、%等）定义间距；允许使用负值initial：指定默认值inherit：从父元素继承属性值
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS letter-spacing</title>
</head>
<body>
<p class="positive_value">
The quick brown fox jumps over the lazy dog.
</p>
<p class="negative_value">
The quick brown fox jumps over the lazy dog.
</p>
</body>
</html>/* widens the space between characters by 2px */
p.positive_value {
letter-spacing: 2px;
}
/* narrows the space between characters by 2px */
p.negative_value {
letter-spacing: -2px;
}浏览器输出
CSS word-spacing 属性
CSS word-spacing 属性用于控制元素文本中每个单词之间的间距。
word-spacing 属性的语法如下：
word-spacing: normal | length | initial | inherit;这里，
normal：单词之间的默认间距length：使用长度单位（如px、em、%等）定义间距；允许使用负值initial：指定默认值inherit：从父元素继承属性值
让我们看一个例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS word-spacing</title>
</head>
<body>
<p>
No live organism can continue for long to exist sanely under
conditions of absolute reality; even larks and katydids are
supposed, by some, to dream. Hill House, not sane, stood by itself
against its hills, holding darkness within; it had stood so for
eighty years and might stand for eighty more.
</p>
</body>
</html>/* widens the space between words by 6px */
p {
word-spacing: 6px;
}浏览器输出
CSS text-indent 属性
CSS text-indent 属性用于调整文本块中第一行的缩进。
text-indent 属性的语法如下：
text-indent: length | initial | inherit;
这里，
length：使用长度单位（如px、pt、em、%等）定义固定缩进；允许使用负值initial：指定默认值inherit：从父元素继承属性值
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS text-indent</title>
</head>
<body>
<p>
The studio was filled with the rich odour of roses, and when the
light summer wind stirred amidst the trees of the garden, there came
through the open door the heavy scent of the lilac, or the more
delicate perfume of the pink-flowering thorn.
</p>
</body>
</html>/* indents the first line by 40px */
p {
text-indent: 40px;
}浏览器输出
CSS line-height 属性
CSS line-height 属性用于调整行框的高度。
line-height 属性的语法如下：
line-height: normal | number | length | initial | inherit;这里，
normal：指定默认的line-height，是默认值number：指定一个数字，该数字乘以当前字体大小来设置line-heightlength：以长度单位（如px、pt、cm等）指定line-heightinitial：将值设置为默认值inherit：继承其父元素的属性值。
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS line-height</title>
</head>
<body>
<p class="normal-value">
The studio was filled with the rich odour of roses, and when the
light summer wind stirred amidst the trees of the garden, there came
through the open door the heavy scent of the lilac, or the more
delicate perfume of the pink-flowering thorn.
</p>
<p class="numeric-value">
The studio was filled with the rich odour of roses, and when the
light summer wind stirred amidst the trees of the garden, there came
through the open door the heavy scent of the lilac, or the more
delicate perfume of the pink-flowering thorn.
</p>
</body>
</html>p.normal-value {
line-height: normal;
}
/* sets value 2 times the current
font size = 16px x 2 = 32px */
p.numeric-value {
line-height: 2;
}浏览器输出
注意：使用数字设置 line-height 比使用长度值更好，因为它会根据文本大小计算高度。这可以确保行与行之间的间距一致，而与字体大小无关。