Google Chrome开发者工具将浏览器默认字体大小显示为18像素？

Question

默认字体大小为16像素。我做了一个简单的页面并对其进行了测试。我查看了谷歌浏览器中的开发者工具，它说18（是的，我删除了边距和填充到段落元素）。 我运行以下JavaScript来手动获取字体大小，看它是否是16px，它是。 这个号码18是什么？

var el = document.getElementById('hello');
var style = window.getComputedStyle(el, null).getPropertyValue('font-size');
var fontSize = parseFloat(style);
console.log(fontSize);

<p id='hello'>Hello world</p>

Answer 1

line-height。设置line-height: 1;，高度为16px。

＆＃13;

＆＃13;

var el = document.getElementById('hello');
el.style.lineHeight = '1';
var style = window.getComputedStyle(el, null).getPropertyValue('font-size');
var fontSize = parseFloat(style);
console.log(fontSize);

＆＃13;

<p id='hello'>Hello world</p>

＆＃13;

＆＃13;

＆＃13;

Answer 2

Chrome开发者工具选择的区域包括line-height（请参阅https://developer.mozilla.org/en/docs/Web/CSS/line-height）以及padding元素周围的所有margin / p。< / p>

• 您可以在样式窗格中浏览填充和边距：

  

• 如果没有填充或边距（如您的示例所示），那么这只是line-height 。将其设置为1以获得预期的输出。