开发者社区> 问答> 正文

浏览器是怎么计算行内元素高度的?

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <title>image</title>
    <style type="text/css">
        span {
            font-family: "Microsoft YaHei", "Hiragino Sans GB", "WenQuanYi Micro Hei", sans-serif;
            font-size: 16px;
            line-height: 16px;
        }
    </style>
</head>
<body>
    <div>
        <span>行内元素</span>
    </div>
</body>
</html>

在Chrome里,span的高度从开发者工具看是21px,而我设置的是16px的行高和字体大小。
那么为什么实际高度变成了21px,多出来的5px是什么属性造成的?
外层的div实际高度从开发者工具看是18px,为什么不是21px?

展开
收起
a123456678 2016-05-27 16:07:43 2213 0
2 条回答
写回答
取消 提交回答
  • 楼主这个问题你搞明白了吗,我也有同样疑问,求解答。

    2019-07-17 19:18:10
    赞同 展开评论 打赏
  • 给span元素设置的宽度和高度并不起作用,如果想要设置高度和宽度需要将它们转换为块级元素或者行内块元素。
    添加:display: inline-block;

    2019-07-17 19:18:10
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
WEB浏览器中即将发生的安全变化 立即下载
基于浏览器的实时构建探索之路 立即下载
基于浏览器的实时构建探索之路--玄寂 立即下载