CSS中行高的继承和单位之间的关系

喵_美

墨衍会员 · AI 创作全网分发码龄11年

关注

转载最新推荐文章于 2026-05-28 12:37:39 发布 1k 阅读 AI 写同款· GEO 优化 ›

万物皆可GAN ---普通GAN, pix2pix, CycleGAN和pix2pixHD的比较以及演变过程普通GAN, pix2pix, CycleGAN和pix2pixHD的原理、比较以及演变过程阅读详情

我们知道行高是可以继承的并且行高的单位有四种情况。

1具体像素值如：line-height: 16px;

2 em

em是指当前标签设置的字体大小，比如当前标签字体大小是16px，那么2em = 32px；

3 %

%与em一样都是以当前标签设置的字体大小为基准，比如当前标签字体大小是16px，那么line-height: 200%; 则字体大小为32px;

4什么单位都不带。

  与%是一样的，比如当前标签字体大小是16px，line-height:2;则字体大小为32px;

先来看一个行高正常继承的例子

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .one {
            font-size: 20px;
            line-height: 2;
            /*line-height: 200%;*/
            /*line-height: 2em;*/
        }
    </style>
</head>
<body>
<div class="one">
    <div class="two">看看字体的大小</div>
</div>
</body>
</html>

在父元素里不管设置line-height:2;line-height:200%; 或者line-height:2em;中其中那一种，都可以发现字体的行高变成40px.

如果我们给子元素div也设置字体为25px，父元素的行高为2em或者200%，行高依然是40px。

.one {
    font-size: 20px;
    line-height: 2em;
    /*line-height: 200%;*/
}
.two {
    font-size: 25px;
}

那么问题来了，如果我们父元素的行高为2(不带单位)，那么行高是否仍然为40px呢？

.one {
    font-size: 20px;
    line-height: 2;
}
.two {
    font-size: 25px;
}

在浏览器中我们可以发现行高变成了50px

因此我们在设置行高的时候需要注意一下两点：

1、在设置行高的时候，如果单位是em或者%，那么将来行高会先计算出来结果以后再继承给子元素。

2 、在设置行高的时候，如果单位是没有单位，那么将来行高会先继承给子元素，然后再计算出行高。

来源：优快云
原文：https://blog.youkuaiyun.com/k491022087/article/details/52389184

收录于

html

原文链接：https://blog.youkuaiyun.com/k491022087/article/details/52389184 >

TVBox源总失效？不如自己搭建一个！告别不稳定！手把手教你自建TVBox源，全网资源尽掌握！ 🚀 TVBox源总失效？别慌！手把手教你自建TVBox源，打造一个稳定、海量、无广告的影视宝库！从此告别片荒，尽享丝滑观影体验！阅读详情

CSS中行高的继承和单位之间的关系

先来看一个行高正常继承的例子

相关推荐