面試官問：Css line-height是如何繼承的
作者：dev
如果父元素的 line-height 設置為一個百分比（如 line-height: 150%），那么子元素的 line-height 將根據父元素的字體大小計算出一個新的行高。
line-height 屬性在 CSS 中是繼承的，但有一些特殊之處。它的繼承規則如下：
- 繼承自父元素：
line-height是一個繼承屬性，這意味著子元素默認會繼承父元素的line-height值。 - 數值繼承：如果父元素的
line-height設置為一個數值（如1.5），子元素也會繼承這個數值。但是，這個數值會影響到字體的行高，因為它是相對于該元素的字體大小進行計算的。 - 百分比繼承：如果父元素的
line-height設置為一個百分比（如line-height: 150%），那么子元素的line-height將根據父元素的字體大小計算出一個新的行高。 - 關鍵字繼承：如果父元素設置了
line-height為normal（默認值），那么子元素也會繼承normal，即行高會自動調整到適合文本的大小。 - 當值為
inherit時：如果在子元素中顯式地設置line-height: inherit，那么子元素會繼承父元素的line-height。
總的來說，line-height 是一個繼承性較強的屬性，但它的繼承效果取決于父元素的字體大小和 line-height 設置的方式。
下面是一個簡單的示例來展示 line-height 如何繼承：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>line-height 繼承示例</title>
<style>
/* 父元素設置 line-height 為 1.5 */
.parent {
font-size: 20px;
line-height: 1.5;
background-color: lightyellow;
}
/* 子元素會繼承父元素的 line-height */
.child {
background-color: lightblue;
}
/* 另一個子元素設置 line-height 為 inherit，顯式繼承父元素的 line-height */
.child-inherit {
line-height: inherit;
background-color: lightgreen;
}
/* 這個子元素沒有繼承父元素的 line-height，顯式設置為 2 */
.child-custom {
line-height: 2;
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="parent">
<p>我是父元素，line-height 設置為 1.5。</p>
<div class="child">
<p>我是子元素，默認繼承父元素的 line-height。</p>
</div>
<div class="child-inherit">
<p>我是子元素，顯式使用 inherit，繼承父元素的 line-height。</p>
</div>
<div class="child-custom">
<p>我是子元素，顯式設置 line-height 為 2，不繼承父元素的值。</p>
</div>
</div>
</body>
</html>解釋：
.parent元素的line-height設置為1.5。.child元素會默認繼承父元素的line-height，因此它的行高為1.5。.child-inherit顯式地設置了line-height: inherit;，所以它也繼承了父元素的line-height，值為1.5。.child-custom顯式設置了line-height: 2;，因此它的行高為2，不會繼承父元素的line-height。
通過這個例子，你可以看到 line-height 如何繼承以及如何通過設置顯式的值來覆蓋繼承行為。
責任編輯：武曉燕
來源：
大遷世界
