小編精選 - 技術文章翻譯 · 02月08日

CSS 行高的工作原理和最佳實踐

CSS 屬性line-height定義兩個內嵌元素之間的間距。典型用途是分隔文字。您可以看到人們將其與“前導”進行比較，“前導”是印刷術中使用的術語，指兩行文本的基線之間的空間。 line-height工作方式不同。它在文字上方和下方加入了空間。

行距與行高

左：行距，右：行高

用法

您可以使用具有不同值的line-height如下所示：

body {
    line-height: normal; /* default */
    line-height: 2;
    line-height: 1em;
    line-height: 1rem;
    line-height: 200%;
    line-height: 20px;
}

噢，孩子😧！好多啊。讓我們一一分析一下👍。

預設值和無單位值

如果您不將其設定為不同的值，則「正常」是預設值。通常，這意味著它設定為1.2 ，這取決於瀏覽器供應商。那麼只有一個數字值而沒有任何單位是什麼意思呢？它實際上是一個乘數。它採用font-size值並將其乘以1.2 。讓我們用下面的例子來計算一條線的高度。

body {
    font-size: 16px;
    line-height: 1.5;
}

我們只需要做以下計算：16 * 1.5 = 24px。現在我們知道文字的最小高度為 24 像素。因此它將在文字下方和上方加入 4 個像素。酷就這麼簡單😎！

em 和 rem

下一個是em和rem 。 rem相對於根元素的font-size ， em相對於目前元素的 font-size。這是一個例子

html {
    font-size: 12px;
}

.remExample {
    font-size: 16px;
    line-height: 1.5rem; /* line-height will be 12 * 1.5 = 18px */
}

.emExample {
    font-size: 16px;
    line-height: 1.5em; /* line-height will be 16 * 1.5 = 24px */
}

百分比

%值有點難以閱讀。 100%意味著乘以1。再次舉例來說明這一點。

body {
    font-size: 12px;
}

.percentage {
    font-size: 16px;
    line-height: 150%; /* line-height will be 16 * 1.5 = 24px */
}

像素（px）

對我來說最簡單也是最令人困惑的是px值。將其設為任何像素值都會將其精確地設定為該值。因此，如果您的font-size為 16px，並且您將line-height設為 12px，您的字體將比它所包裝的容器更大。一般來說，您應該盡量避免在行高中使用px值！

body {
    font-size: 16px;
}

.pixel {
    line-height: 12px;
}

一些最佳實踐

一般來說，我先將body元素中的font-size和line-height設定為以下值。

body {
    font-size: 16px;
    line-height: 1.5;
}

由此，您可以建立所有其他樣式。我會盡量避免使用無單位數字以外的任何東西。另外，嘗試使用易於分割的font-size值，例如 16 或 12。這將有助於您在設計中保持平衡。您也可以在margin和padding中使用它。在腦中計算 16 * 1.5 比 13 * 1.5 更容易。然後您將永遠知道實際價值是多少。

body {
    font-size: 16px;
    line-height: 1.5;
}

h1, h2, h3, h4, ul, ol {
    margin-bottom: 15rem;
}

button {
    display: inline-block;
    padding: 0.75rem 1.5rem;
}

當然，你可以嘗試一下，這些規則也會有例外，但我總是這樣開始。

資源

謝謝閱讀！

原文出處：https://dev.to/lampewebdev/css-line-height-jjp

1個讚 0留言 435瀏覽

按讚的人：

共有 0 則留言

登入之後發表留言

文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式

小編精選 - 技術文章翻譯

精選技術文章翻譯，幫助開發者持續吸收新知。