在CSS中,可以使用 letter-spacing
属性来修改 div
元素内文字的字间距。letter-spacing
属性允许你指定字符之间的间距,可以设置为正常间距、更紧或更宽的间距。
normal
:默认值,字符之间的标准间距。length
:指定字符之间的间距,可以是px
(像素)、em
(相对于元素的字体大小)等。正值增加间距,负值减少间距。
示例 1: 正常字间距
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Letter Spacing Example</title><style>.normal-spacing {letter-spacing: normal; /* 默认值 */}</style>
</head>
<body><div class="normal-spacing">这是正常字间距的文字。</div>
</body>
</html>
示例 2: 紧字间距
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Letter Spacing Example</title><style>.tight-spacing {letter-spacing: -0.05em; /* 负值使字符更紧凑 */}</style>
</head>
<body><div class="tight-spacing">这是紧字间距的文字。</div>
</body>
</html>
示例 3: 宽字间距
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Letter Spacing Example</title><style>.wide-spacing {letter-spacing: 0.1em; /* 正值使字符间距更宽 */}</style>
</head>
<body><div class="wide-spacing">这是宽字间距的文字。</div>
</body>
</html>