Michael Zippo
CSS line-height 屬性決定了各種 HTML 元素的行高。它通常用於定義文本行之間的距離。行高可以通過文字來設置 - 鍵、百分比或數值。
CSS line-height 屬性允許開發人員設置網頁上兩個內聯元素之間的間距。開發人員經常使用 CSS line-height 屬性來增加或減少網頁上文本行之間的距離。
本教程解釋瞭如何使用 CSS line-height 屬性。我們將參考一個示例來幫助您入門。閱讀完本教程後，您將對在代碼中使用 line-height 屬性有一個很好的理解。
line-height CSS 屬性定義行框的高度。線條區域是構成 CSS 區域中的 的線條。此方法通常用於定義文本行之間的距離。
調整行高允許您間接調整網頁上文本（或其他元素）行之間的間距。它非常類似於在 Microsoft Word 中使用雙倍間距或 1.15 間距格式化文本。
line-height CSS 屬性的語法如下：
“lineHeight”指的是定義元素高度的長度值。
三種類型的值，你可以使用line-height屬性是長度、數字和百分比：
| 值 | 描述 | 示例值， Äã‚Äã | 的結果 示例值‚Äã‚Äã |
| 長度 | 使用特定的測量單位（如 em、px 和 cm）定義行高。 | 10 px, 15 px, 20 px | 如果指定10px，則線高為10px。 |
| Number | 將行高設置為字體大小的倍數。 | 1, 1,8, 2 | 如果字體大小為10px，則行高分別為10px、18px和20px。 |
| percentage | 將行高定義為項目字體大小的百分比。 | 30%, 50%, 110% | 如果字體大小為10px，則行高分別為3px、5px、11px。 或者，您可以指定關鍵字“normal。”這個關鍵字指定使用默認瀏覽器。該值通常在 1.2 左右，具體取決於用戶使用的瀏覽器。 如果您將 line-height 屬性應用於一個框，則該框中的所有文本都將使用您指定的 .line 框的高度。 關於可訪問性的說明更改行間距是 line-height 屬性的常見用法。這是因為您總是希望確保行與行之間有足夠的間距。如果行與行之間沒有足夠的間距，文本可能難以閱讀。 難以閱讀的文本對視障者的影響特別嚴重。創建網站時應始終考慮可訪問性。 使用數字設置行高時CSS中的元素，你應該d 不要使用小於 1.5 的值。這是因為行高值小於 1.5 會使您的網站更難被視障讀者使用。 行高的 CSS 示例假設您正在設計一個“關於我們，" 當地烹飪俱樂部網站的頁面。該頁麵包含一個標題，後面是一段描述俱樂部描述的文字。 我們希望我們的文字間隔適當。所以我們決定將網頁上文本段落的行高設置為 1.6 rem。我們可以使用以下代碼來做到這一點： 我們的代碼返回：點擊 在我們的 HTML 文件中，我們使用 標記定義了一個“關於我們”的標題。所以我們寫了一個 Fantastic Chefs 的描述並將其包含在 HTML 標籤。在我們的 CSS 文件中，我們定義了一個規則。我們的規則使用了兩個 CSS 屬性。我們將行高設置為 1.6rem 和字體大小對於所有 HTML 標籤，為 16px。 我們與 line-height 屬性一起使用的“rem”度量單位定義了相對於根元素的字體大小的行高。“rem”表示“根元素”。所以，因為我們的字體大小是16px，所以這一段文字的行高是25.6px（16px * 1.6）。 上一段文字間距很好，沒有 我們還可以將行高應用到前面示例中的 標記中所有文本的行高設置為值 ‚Äã‚Äãwe指定。這意味著我們的標題和我們的 標籤會受到影響。 結論CSS line-hei ght 屬性定義線框的高度。通常，此屬性用於設置段落或標題中文本行之間的間距。可以使用 normal 關鍵字、百分比、長度或數值來設置行高。 本教程討論了 CSS 行高屬性的基礎知識以及如何在代碼中使用它。您現在已經掌握了開始使用 CSS line-height 屬性的知識，就像專家一樣！ 您想成為一名 Web 開發人員嗎？查看我們的 CSS 學習指南，獲取有關最佳學習資源和課程的專家建議和技巧。 |
在上面的代碼編輯器中查看我們的HTML/CSS代碼的輸出。