数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究利用 CSS letter-spacing 属性设置字母间距
使用CSS的letter-spacing属性，我们可以指定文字字母之间的间距。信号间距可以用像素、EM 等长度单位设定。下面让我们看看语法。
语法
letter-spacing属性的语法如下：
letter-spacing: value;
其取值可以是：
普通——字符之间的标准空隙。
长度——字符之间的空隙的长度
以下实例展示了CSS的letter-spacing属性：
以em为单位设置字母间距
在此例中，我们使用了<em> 来设置字母间距。EM是一种相对于字体大小的度量单位。一个em等于16px：
letter-spacing: 2em;
示例
让我们看一个例子：
<!DOCTYPE html>
<html>
<head>
<style>
p:first-of-type {
margin: 3%;
padding: 3%;
background-color: seagreen;
color: white;
letter-spacing: 2em;
font-size: 2em;
text-align: center;
}
</style>
</head>
<body>
<p>BOOM</p>
<p>BOOM</p>
</body>
</html>
以像素为单位设置字母间距
在此例中，我们使用了px来设置字母间距。px代表像素：
letter-spacing: 12px;
示例
让我们看一个例子：
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: flex;
margin: 3%;
padding: 3%;
border: 23px ridge navy;
}
p {
margin: 3%;
background-color: navajowhite;
letter-spacing: 12px;
font-size: 1.2em;
text-align: center;
}
</style>
</head>
<body>
<div>
<p>BOOM</p>
<p>abcdefghijklmnop-qrstuvwxyz</p>
</div>
</body>
</html>
用负值设置字母间距
信号间距可以用letter-spacing属性的负值来设置：
.demo2 {
letter-spacing: -1px;
}
示例
让我们看一个例子：
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
letter-spacing: 20px;
}
.demo2 {
letter-spacing: -1px;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<p class="demo">This is a demo text.</p>
<p class="demo2">This is another demo text.</p>
</body>
</html>
更新时间：2023年12月27日
216次浏览
广告