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