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

Question

The default font size is known to be 16 pixels. I made a simple page and tested this out. I looked at the Developer Tools in Google Chrome and it says 18 (yes I removed margin and padding to the paragraph element). I ran the following JavaScript to manually get the font size to see if it was 16px and it was. What is this number 18 from?

 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

The line-height . Set line-height: 1; and the height will be 16px.

 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); 

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

Answer 2

The area selected by the Chrome Dev Tools includes the line-height (see https://developer.mozilla.org/en/docs/Web/CSS/line-height ), and any padding / margin around the p element.

• You can explore the padding and margin in the styles pane:

  

• If there is no padding or margin (as in your example), then this is simply the line-height . Set it to 1 to get your expected output.