5.1 属性 line-height
文本参数，比如 line-height、letter-spacing 和 word-spacing，在网页中文字的样式化中扮演着重要角色。它们分别允许我们控制行高（行间距）、字母间距和词间距。下面我们详细了解这些属性。
属性 line-height 确定文本行的高度。它设置相邻文本行基线之间的距离，影响文本的密集度和可读性。
值：
- 数值：没有单位的相对值（比如 1.5），它会乘以当前的字体大小
- 百分比值：相对于当前字体大小的百分比值（比如 150%）
- 绝对值：固定单位的值（例如像素）（比如 24px）
- 关键字
normal：默认值，通常等于 1.2
使用示例：
CSS
.normal {
line-height: normal;
}
.one-point-five {
line-height: 1.5;
}
.double {
line-height: 2;
}
HTML
<body>
<p class="normal">这是正常行高的文本。这是正常行高的文本。</p>
<p class="one-point-five">这是行高1.5的文本。这是行高1.5的文本。</p>
<p class="double">这是双倍行高的文本。这是双倍行高的文本。</p>
</body>
5.2 属性 letter-spacing
属性 letter-spacing 定义了字母间距，也就是字符之间额外的空间。它可以用于改善可读性或创建视觉效果。
值：
- 绝对值：固定单位的值（例如像素 — 2px）
- 负值：缩小字符之间的距离（例如 -1px）
- 关键字
normal：默认值，等于0（不含额外空间）
使用示例：
CSS
.normal {
letter-spacing: normal;
}
.wide {
letter-spacing: 2px;
}
.narrow {
letter-spacing: -1px;
}
HTML
<body>
<p class="normal">这是正常字母间距的文本。</p>
<p class="wide">这是增加字母间距的文本。</p>
<p class="narrow">这是减少字母间距的文本。</p>
</body>
5.3 属性 word-spacing
属性 word-spacing 定义了文本中词间距。它可以添加或删除词之间的空间，用于提高可读性或创造视觉效果。
值：
- 绝对值：固定单位的值（例如像素）（比如 4px）
- 负值：缩小词之间的距离（比如 -2px）
- 关键字
normal：默认值，等于标准词间距（通常为0）
使用示例：
CSS
.normal {
word-spacing: normal;
}
.wide {
word-spacing: 4px;
}
.narrow {
word-spacing: -2px;
}
HTML
<body>
<p class="normal">这是正常词间距的文本。</p>
<p class="wide">这是增加词间距的文本。</p>
<p class="narrow">这是减少词间距的文本。</p>
</body>
GO TO FULL VERSION