DEV Community

Discussion on: How CSS line-height works and best practices

Collapse
 
bitdweller profile image
Pedro Pimenta

I think there's a mistake with the percentage definition. When you define line-height to 1.5% you don't multiply it by 1.5, you multiply it by 0.15.

Also it refers to the element it is defined, not the parent. 100% on the child would give a line-height value of 24px.

At least it's what I'm getting on Firefox. Is it different for you?

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Your are right!
It should be 150%!

Yeah while I was writing this I was thinking for some reason about witdh or height. % in line-heigh refers to the font-size of the element.

Thank you!

Collapse
 
bitdweller profile image
Pedro Pimenta

Yes and it refers to the font-size of the element itself. I think that for .child to have a line-height of 24px it should have it set to 100%.

Thread Thread
 
lampewebdev profile image
Michael "lampe" Lazarski

I just forgot to update the CSS 🤣.

Now it should be correct!

Thanks again! appreciated it!