Javascript 行高

| | | | | | | | | | | | | | | | | | | | | | | | | |

CSS line-height 屬性決定了各種 HTML 元素的行高。它通常用於定義文本行之間的距離。行高可以通過文字來設置 - 鍵、百分比或數值。

CSS line-height 屬性允許開發人員設置網頁上兩個內聯元素之間的間距。開發人員經常使用 CSS line-height 屬性來增加或減少網頁上文本行之間的距離。

本教程解釋瞭如何使用 CSS line-height 屬性。我們將參考一個示例來幫助您入門。閱讀完本教程後,您將對在代碼中使用 line-height 屬性有一個很好的理解。

Line-height CSS

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/CSS代碼的輸出。

在我們的 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 學習指南,獲取有關最佳學習資源和課程的專家建議和技巧。