在 CSS 中設定行距

Subodh Poudel 2023年2月20日 2021年12月20日
在 CSS 中設定行距

我們將介紹幾種在 CSS 中設定行距的方法。

在 CSS 中使用 line-height 屬性設定行距

我們可以使用 CSS line-height 屬性來定義段落中各行之間的間距。該屬性設定線的高度。

在定義行高時,行與行之間的空間將相應地增大或縮小。我們可以將 line-height 屬性應用於文字元素,尤其是段落。

該屬性採用不同的值,例如 normalnumberlength%initialinherit。我們將在文章中演示這些不同選項的用法。

normal 值是 line-height 屬性的預設值。它將設定正常的行高。

我們可以將值設定為無單位的 number。給定的數字將乘以當前字型大小,並用於設定 line-height。數字 1.6line-height 屬性的推薦值。

我們還可以使用 length 值,給出諸如 ptpxcm 等單位。% 中的值指定當前字型大小的百分比以設定 line-height

我們可以使用 initial 值設定 line-height 屬性的預設值。inherit 值將使用與其父元素相同的屬性值。

例如,在 HTML 中建立四個 div,分別為 normalnumberpercentagelength。在 div 內,寫一些虛擬文字。

然後,在 CSS 中,選擇 div 元素並將 width 屬性設定為 400px,將 word-wrap 屬性設定為 break-word。接下來,選擇具有類名的 div 個體,並根據以下示例中顯示的類名將 line-height 屬性值設定為 normal280%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 Poudel avatar Subodh Poudel avatar

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