全面理解解析line-height: 150%和line-height: 1.5em和line-height: 1.5rem和line-height: 1.5的区别

最新推荐文章于 2025-11-05 17:32:07 发布

原创最新推荐文章于 2025-11-05 17:32:07 发布 · 4.8k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

CSS 专栏收录该内容

10 篇文章

订阅专栏

本文深入解析了CSS中行高(line-height)属性的不同单位设置及其对元素的影响，包括百分比、em、rem等单位的具体表现，并通过实例代码展示了行高继承的特点。

欢迎来到Altaba的博客 2017年9月7日

很开心今天能抽点时间解析这个CSS样式行高的问题，相信行高如果设置具体的大小是很好确定的，当设置为上面这四个相对单位的时候，可能就有点凌乱

没有对比就没有区别，没有求真就没有进步，本人致力于为大家提供最准确的前端技术解答

先上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div div{
            display: inline-block;
        }

        .box{
            font-size: 20px;
            line-height: 4em;
        }

        .box div{
            display: inline-block;
        }
    </style>
</head>
<body>
<h2>150%</h2>
<div style="font-size: 20px;line-height: 150%">
    父元素内容font-size: 20px
    <div style="font-size: 30px">子元素内容font-size: 30px</div>
</div>
<h2>1.5em</h2>
<div style="font-size: 20px;line-height: 1.5em">
    父元素内容font-size: 20px
    <div style="font-size: 30px">子元素内容font-size: 30px</div>
</div>
<h2>1.5 子元素设置line-height:1.5</h2>
<div style="font-size: 20px;line-height: 1.5em">
    父元素内容font-size: 20px
    <div style="font-size: 30px; line-height: 1.5">子元素内容font-size: 30px</div>
</div>
<h2>1.5rem</h2>
<div style="font-size: 20px;line-height: 1.5rem">
    父元素内容font-size: 20px
    <div style="font-size: 30px">子元素内容font-size: 30px</div>
</div>
<h2>1.5</h2>
<div style="font-size: 20px;line-height: 1.5">
    父元素内容font-size: 20px
    <div style="font-size: 30px;line-height: 2">子元素内容font-size: 30px <span style="font-size: 40px">孙子元素</span></div>
</div>

<h2>1.5 子元素未设置字体大小</h2>
<div style="font-size: 20px;line-height: 1.5">
    父元素内容font-size: 20px
    <div style="font-size: 30px">子元素内容font-size: 30px</div>
</div>

<h2>继承性理解</h2>
<div class="box">
    <div>子元素未设置行高
        <div>孙子元素未设置行高</div>
    </div>
</div>

<div style="font-size: 50px">
    父元素
    <div style="font-size: 20px;line-height: 1em">子元素</div>
</div>
<h1>已经完全理解</h1>
</body>
</html>

通过对比及测试发现：

想知道某个元素的line-height（行高）大小，别去思考其父元素和子元素怎么设置的或者对其有什么影响，记住！！！：只看当前元素的某些样式

***某个元素A，当其设置了
line-height: 150或者line-height: 1.5em结果始终一样，其自身的行高等同，计算方式都是1.5*（当前元素实际的字体大小）

其后代元素如果未另外设置行高便会继承元素A的行高大小

***某个元素B，当其设置了

line-height: 1.5rem,其自身的行高计算方式为：1.5*（当前页面body或者HTML设置的font-size大小，如若没设置font-size大小即为浏览器默认的页面字体大小）

其后代元素如果未另外设置行高便会继承元素A的行高大小

***有点绕的在这！某个元素C，当其设置了

line-height: 1.5，其自身的行高计算方式也简单，=1.5*（当前元素实际的字体大小），

其后代的元素行高：

（1）如果后代的元素自己设置了行高则会使用自己的行高大小

（2）如果后代未设置行高，元素C只会将其1.5这个倍数继承给后代元素，不同后代的元素行高大小和其自身的实际字体大小相关，计算方式：（后代元素自身的字体大小*1.5）