# HTML如何設置文字間距
在網頁設計中，文字間距的調整是提升可讀性和美觀度的重要手段。本文將詳細介紹通過HTML和CSS設置**字間距（letter-spacing）**、**詞間距（word-spacing）**和**行間距（line-height）**的方法，并附代碼示例。
---
## 一、基礎概念
### 1. 字間距（Letter Spacing）
控制單個字符之間的水平距離，適用于標題、LOGO等需要強調的文本。
### 2. 詞間距（Word Spacing）
調整單詞之間的間隔，常用于英文排版。
### 3. 行間距（Line Height）
決定文本行與行之間的垂直距離，直接影響段落可讀性。
---
## 二、CSS屬性詳解
### 1. 設置字間距：`letter-spacing`
```html
<p style="letter-spacing: 2px;">這段文字的字間距為2像素</p>
屬性值：
- normal：默認間距（通常為0）
- 長度單位：px、em、rem等（支持負值）
示例：
h1 {
letter-spacing: -1px; /* 緊湊標題 */
}
.logo {
letter-spacing: 5px; /* 藝術化效果 */
}
word-spacing<p style="word-spacing: 10px;">This is an example sentence.</p>
注意： 對中文無效（中文無空格分詞）。
line-height<p style="line-height: 1.6;">多行文本示例<br>第二行內容</p>
推薦值： - 無單位數字：1.5~2.0（相對于當前字體大?。?- 固定值：24px（需考慮響應式）
/* 根據屏幕寬度調整 */
p {
letter-spacing: 0.5px;
}
@media (min-width: 768px) {
p {
letter-spacing: 1px;
}
}
h2 {
letter-spacing: 3px;
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
@keyframes spacing {
0% { letter-spacing: 0; }
50% { letter-spacing: 10px; }
100% { letter-spacing: 0; }
}
.animate-text {
animation: spacing 3s infinite;
}
<!DOCTYPE html>
<html>
<head>
<style>
.spacing-demo {
font-family: Arial;
width: 80%;
margin: 20px auto;
}
.letter-spacing {
letter-spacing: 0.8em;
background: #f0f8ff;
}
.word-spacing {
word-spacing: 20px;
background: #fff0f5;
}
.line-height {
line-height: 2.5;
background: #f0fff0;
}
</style>
</head>
<body>
<div class="spacing-demo">
<p class="letter-spacing">字間距調整示例</p>
<p class="word-spacing">Word spacing example</p>
<p class="line-height">行間距控制演示<br>第二行文本內容</p>
</div>
</body>
</html>
通過合理運用這些屬性，可以顯著提升網頁的排版質量。建議在實際項目中結合字體選擇、顏色搭配進行綜合調試。 “`
注：本文約850字，包含實踐性代碼和關鍵注意事項。如需擴展具體案例或瀏覽器兼容性細節，可進一步補充內容。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
