line-height
line-height CSS 屬性在水平書寫模式中設定行框的高度。在垂直書寫模式中，它設定行框的寬度。它通常用於設定文字行之間的距離。在水平書寫模式下的塊級元素上，它指定元素內行框的首選高度；在非替換的內聯元素上，它指定用於計算行框高度的高度。
試一試
line-height: normal;
line-height: 2.5;
line-height: 3em;
line-height: 150%;
line-height: 32px;
<section id="default-example">
<div class="transition-all" id="example-element">
Far out in the uncharted backwaters of the unfashionable end of the western
spiral arm of the Galaxy lies a small unregarded yellow sun.
</div>
</section>
#example-element {
font-family: "Georgia", serif;
max-width: 200px;
}
語法
/* Keyword value */
line-height: normal;
/* Unitless values: use this number multiplied
by the element's font size */
line-height: 3.5;
/* <length> values */
line-height: 3em;
/* <percentage> values */
line-height: 34%;
/* Global values */
line-height: inherit;
line-height: initial;
line-height: revert;
line-height: revert-layer;
line-height: unset;
line-height 屬性可指定為以下任意一種值：
- 一個
<number> - 一個
<length> - 一個
<percentage> - 關鍵字
normal。
值
normal-
取決於使用者代理。桌面瀏覽器（包括 Firefox）預設值約為
1.2，具體取決於元素的font-family。 <number>（無單位）-
使用的值是這個無單位的
<number>乘以元素本身的字型大小。計算值與指定的<number>相同。在大多數情況下，這是設定line-height的首選方式，可以避免由於繼承而產生的意外結果。 <length>-
指定的
<length>用於計算行框高度。以 em 單位給定的值可能會產生意想不到的結果（請參閱下面的示例）。 <percentage>-
相對於元素本身的字型大小。計算值是此
<percentage>乘以元素的計算字型大小。百分比值可能會產生意想不到的結果（請參閱下面的第二個示例）。
無障礙
對於主要段落內容，line-height 至少使用 1.5 的值。這將有助於有弱視情況的人以及有認知障礙（如閱讀障礙）的人。如果頁面被放大以增加文字大小，使用無單位值可確保行高按比例縮放。
正式定義
| 初始值 | normal |
|---|---|
| 應用於 | 所有元素。也適用於 ::first-letter 和 ::first-line。 |
| 繼承性 | 是 |
| 百分比 | 參考元素本身的字型大小 |
| 計算值 | 對於百分比和長度值，使用絕對長度，否則按指定值 |
| 動畫型別 | 數字或長度 |
正式語法
line-height =
normal |
<number [0,∞]> |
<length-percentage [0,∞]>
<length-percentage> =
<length> |
<percentage>
示例
基本示例
/* All rules below have the same resultant line height */
/* number/unitless */
div {
line-height: 1.2;
font-size: 10pt;
}
/* length */
div {
line-height: 1.2em;
font-size: 10pt;
}
/* percentage */
div {
line-height: 120%;
font-size: 10pt;
}
/* font shorthand */
div {
font:
10pt/1.2 "Bitstream Charter",
"Georgia",
serif;
}
通常更方便使用如上所示的 font 簡寫來設定 line-height，但這需要同時指定 font-family 屬性。
行高值優先使用無單位數字
此示例展示了為什麼最好使用<number>值而不是<length>值。我們將使用兩個<div>元素。第一個帶有綠色邊框的 div 使用無單位的 line-height 值。第二個帶有紅色邊框的 div 使用以 em 為單位定義的 line-height 值。
HTML
<div class="box green">
<h1>Avoid unexpected results by using unitless line-height.</h1>
Length and percentage line-heights have poor inheritance behavior.
</div>
<div class="box red">
<h1>Avoid unexpected results by using unitless line-height.</h1>
Length and percentage line-heights have poor inheritance behavior
</div>
<!-- The first <h1> line-height is calculated from its own font-size (30px × 1.1) = 33px -->
<!-- The second <h1> line-height results from the red div's font-size (15px × 1.1) = 16.5px, probably not what you want -->
CSS
.green {
line-height: 1.1;
border: solid limegreen;
}
.red {
line-height: 1.1em;
border: solid red;
}
h1 {
font-size: 30px;
}
.box {
width: 18em;
display: inline-block;
vertical-align: top;
font-size: 15px;
}
結果
垂直書寫模式下的行間距
line-height 屬性可用於調整垂直書寫模式下垂直行之間的間距。
.haiku {
border: 1px solid;
margin-bottom: 1rem;
padding: 0.5rem;
background-color: wheat;
writing-mode: vertical-rl;
}
.wide {
line-height: 2;
}
結果
規範
| 規範 |
|---|
| CSS 內聯佈局模組級別 3 # line-height-property |
瀏覽器相容性
載入中…