给body设置font-size后，其他元素的行高受影响，请问是怎么回事？

发布于
2016-06-13

我设置body{font-size:100px;}后，其他元素的行高好像都收到了影响，页面结构乱了。
请问为什么会这样呢？

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>my-test</title>
<style>
*{ margin: 0; padding: 0; }
body{ font-size: 100px; } /*去掉这个设置就是正常的*/
.head{ height: 70px; 
    background: lightblue;
}
b{ font-size: 30px; 
}
</style>
</head>
<body>
    <div class="head">
        <b class="status">代开始</b><b class="status">已结束</b>
    </div>        
</body>
</html>

截图：

图片描述

css 前端

阅读 10k

8 个回答

camiler

这跟line-height的initial值有关，标准里面是initial值是normal，而normal是怎样计算的呢？"告诉用户代理根据该元素的字体把应用值设置为一个“合理的”值。该值与<number>的含义相同。我们推荐介于1.0到1.2的“常规”应用值。计算值为'normal'。这个值是参考元素自身的字体大小。"line-height标准所以不指定div.head的高度，直接写入文本：
图片描述
这样整个div的高度计算成了114px，因为div.head继承了body的line-height,可以看到代理计算值也是在1.0-1.2之间。
继续在div里面插入两个内联元素标签，指定内联元素的line-height和字体大小一样，可以看到整个div的高度还是114px，这是因为div的line-height还是继承body的line-height：
图片描述
所以，正如一楼所答的如果 div.head的font-size指为0，那么div的line-height参考自己font-size的值就会很小，看起来排版就正常了。

拾指相扣

3.3k2417

发布于
2016-06-13

.head继承了body的line-height, line-height的默认值是normal ，chrome下是1.14em.

你设定了body的font-size: 100px 也就意味着body下的直接子元素.head的line-height是114px，> .head的高度70px,所以b超出了.head

hwda

1515

发布于
2016-06-13

.head继承了body的font-size，那么.head的font-size也是100px。

此时在.head里有行内元素的情况下（如本例中有b元素），那么.head的line-height默认就是normal（通常为1.14em），也就是说.head的行高约为114px。

文字显示的位置受ling-height影响，背景色受height的影响，所以即使你设置.head为70px，这两个文字也显示到了.head背景色的外面.

解决的办法：
1.显式设置.head的font-size或者line-height
2.去掉.head的行内元素，如浮动b元素或者将b元素设置块状元素

补充：
直接设置b的font-szie改变的是b元素的行高，并不是.head的行高

以上仅个人观点，欢迎讨论

guangpunba

5.4k42754

发布于
2016-06-13

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>my-test</title>
<style>
*{ margin: 0; padding: 0; }
body{ font-size: 100px; } /*去掉这个设置就是正常的*/
.head{ height: 70px; 
    font-size: 0;
    background: lightblue;
}
b{ font-size: 30px; 
}
</style>
</head>
<body>
    <div class="head">
        <b class="status">代开始</b><b class="status">已结束</b>
    </div>        
</body>
</html>