CODEWITHSUNDEEP
htmlcssfont-size
dangee1705
dangee1705

Reputation: 3520

1rem not always equal to 16px

Lets say I have the following HTML:

<h1>Heading</h1>

And the following CSS:

h1{
    font-size: 1rem;
}

The default size for 1rem in my browser (chrome) is 16px, but whilst inspecting the element, I noticed that the height of the h1 was actually 18px, not 16px, so is something wrong here, or is this intentded, and how do I set it to 16px?

Upvotes: 3

Views: 3260

Answers (1)

Asons
Asons

Reputation: 87303

When setting 16px as font size it doesn't mean the actual character will be 16px.

It means the total height of the text will be 16 pixel, big letters, small letter, letter like "j" sit lower than for example "n" and "f" sits higher.

enter image description here

Src: https://css-tricks.com/css-font-size/

Upvotes: 4

Related Questions