資料結構
網路
關係型資料庫管理系統
作業系統
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次瀏覽
廣告