Menu
One strange thing I've noticed when trying to normalize my css across browsers is that default line-height properties for h-elements and other major tag types are different across browsers like Chrome and Firefox, and yet are not set at the user-agent level:
Moreover, popular normalizers like normalize.css don't take care of that either.
So my question is two parts:
529
Desktop browsers (including Firefox) use a default value of roughly 1.2 , depending on the element's font-family . The used value is this unitless <number> multiplied by the element's own font size.
It takes the font-size value and multiplies it by 1.2 . Let's calculate the height of one line with the following example. We just have to do the following calculation: 16 * 1.5 = 24px. So we now know that our text will have a minimum height of 24px.
The default line height in most browsers is about 110% to 120%. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a bigger line-height.
I agree that "things aren't meant to be exactly the same" is somewhat of a cop-out, especially as even IE comes on board with pretty good standards adoption.
Relative (120%, 1, 1em) line-height values are based on the computed font-size, Normal is supposed to be based on font size but it can and does vary from browser to browser, as you can see by opening up this example in FF and Chrome: http://jsfiddle.net/mahalie/BSMZe/6/
I generally look to HTML5 Boilerplate for queues on best practices since it is so popular (and therefore well vetted / under a lot of scrutiny. They use:
body { margin: 0; font-size: 13px; line-height: 1.231; }
And their discussion of it is quite interesting although no perspective is the clear winner: https://github.com/h5bp/html5-boilerplate/issues/724
136
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
