作者：想挽回的-谎言 | 来源：互联网 | 2023-07-30 23:44
我在学习line-height的时候，知道子元素是可以继承父级元素的line-height的，也能理解当父级元素设置line-height的单位分别为em和百分比的换算情况
我在学习line-height的时候，知道子元素是可以继承父级元素的line-height的，也能理解当父级元素设置line-height的单位分别为em和百分比的换算情况。
但是当父级元素设置line-height为具体的像素值，子元素只设置字体的大小，我分别将子元素变为Inline和inline-block的时候发现子元素占用的内容区域会发生变化。想了解下当父级的line-height为具体的像素值，子元素继承的line-height有具体的一个计算规则么
codepen地址看这里
看下面的一个代码结构
css的代码如下
1
2
3
4
5
6
7
8
9
10
11
| .test2 {
line-height: 30px;
font-size: 16px;
border: 1px solid red;
}
.test2 > span {
font-size: 30px;
/* display: inline-block; */
background-color: #0fd9fe;
} |
下面的这张图是设置子元素为默认的inline时内容占用的区域，通过chrome开发者工具可以看到绿色区域的高度是42px
下面的这张图是设置子元素为默认的inline-block时内容占用的区域，通过chrome开发者工具可以看到绿色区域的高度是30px
我对于这两种情况下的浏览器计算结果不是很理解，期望大佬指点迷津。
今天又在多个浏览器测试了一下，在safari和chrome表现一致，在firefox中不管子元素是inline或者是inline-block都有一致的表现。
京公网安备 11010802041100号