htmlcssgoogle-chrome

Google Chrome Developer tools shows browser default font size as 18 pixels?

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>

enter image description here

Solution

  • 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>