CODEWITHSUNDEEP
cross-browseruser-agentcss
Yarin
Yarin

Reputation: 183849

Finding/setting css line-height defaults

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:

  1. If line-heights aren't set at the user agent level, where are the default values coming from?
  2. I'd rather not normalize line-heights myself, but if I have to, where is a good example of some defaults?

Upvotes: 12

Views: 14534

Answers (1)

mahalie
mahalie

Reputation: 2657

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

Upvotes: 23

Related Questions