前提：通过link重置网页默认样式
情况一：
html中的代码：
<body>
<div class="box1">
<span class="box2">123</span>
</div>
</body>不在css中设置样式，运行结果如下：
这时行内元素的font-size:16px，但其行高并没有因为重置网页样式变为1倍，还是默认的line-height:1.3125，所以行内元素占的高度就还是21px。
其父元素是一个块元素，其默认样式已被修改，所以其被子元素（行内元素）撑开的高度是font-size:16px乘以1倍行高为16px。
情况二（在CSS中给行内元素设置行高）：
<style>
span{
line-height: 30px;
}
</style>运行结果如下：
这时行内元素的行高还是由font-size:16px乘以默认的line-height:1.3125撑开，所以在行内元素中设置line-height并不会更改默认的line-height，但会使父元素的高度被撑开为30px，也使行内元素在父元素中居中。
总结：
行内元素字体占的高度等于其字体的大小font-size乘以默认样式line-height:1.3125；
包裹其的块元素的高度（在行内元素不设置line-height的前提下）为行内元素font-size的高度；
包裹其的块元素的高度（在行内元素设置line-height的前提下）为行内元素line-height的高度。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
