在 CSS 中設定行距
我們將介紹幾種在 CSS 中設定行距的方法。
在 CSS 中使用 line-height 屬性設定行距
我們可以使用 CSS line-height 屬性來定義段落中各行之間的間距。該屬性設定線的高度。
在定義行高時，行與行之間的空間將相應地增大或縮小。我們可以將 line-height 屬性應用於文字元素，尤其是段落。
該屬性採用不同的值，例如 normal、number、length、%、initial 和 inherit。我們將在文章中演示這些不同選項的用法。
normal 值是 line-height 屬性的預設值。它將設定正常的行高。
我們可以將值設定為無單位的 number。給定的數字將乘以當前字型大小，並用於設定 line-height。數字 1.6 是 line-height 屬性的推薦值。
我們還可以使用 length 值，給出諸如 pt、px、cm 等單位。% 中的值指定當前字型大小的百分比以設定 line-height。
我們可以使用 initial 值設定 line-height 屬性的預設值。inherit 值將使用與其父元素相同的屬性值。
例如，在 HTML 中建立四個 div，分別為 normal、number、percentage 和 length。在 div 內，寫一些虛擬文字。
然後，在 CSS 中，選擇 div 元素並將 width 屬性設定為 400px，將 word-wrap 屬性設定為 break-word。接下來，選擇具有類名的 div 個體，並根據以下示例中顯示的類名將 line-height 屬性值設定為 normal、2、80% 和 10px。
我們將 div 寬度和 word-wrap 屬性設定為 break-word 以強制文字進入下一行。通過這種方式，我們可以使用 line-height 屬性來設定 CSS 中的行距。
示例程式碼：
<h2>Normal Value</h2>
<div class="normal">Integer semper, arcu vel bibendum euismod, tellus tortor interdum urna, sed varius libero mi sit amet odio. </div>
<h2>Number Value </h2>
<div class="number">Integer semper, arcu vel bibendum euismod, tellus tortor interdum urna, sed varius libero mi sit amet odio.</div>
<h2>Percentage Value</h2>
<div class="percentage">Integer semper, arcu vel bibendum euismod, tellus tortor interdum urna, sed varius libero mi sit amet odio.</div>
<h2>Length Value</h2>
<div class="length">Integer semper, arcu vel bibendum euismod, tellus tortor interdum urna, sed varius libero mi sit amet odio.</div>
div{
width:400px;
word-wrap: break-word;
}
div.normal {
line-height: normal;
}
div.number {
line-height: 2;
}
div.percentage {
line-height: 80%;
}
div.length {
line-height: 10px;
}
Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.
LinkedIn