2

I am in the process to start a new project. I am asking myself: Why should I add font-size: 100% on the html element when I am using the em unit anyway?

What does this 100% to - 100% compared to what?

Sven
  • 12,997
  • 27
  • 90
  • 148
  • Compared to the inherited font size, same as em (for the root element, that's the default text size) – Dave Oct 21 '13 at 19:38
  • 3
    Have you seen http://stackoverflow.com/questions/6803016/css-100-font-size-100-of-what?rq=1? – j08691 Oct 21 '13 at 19:39

2 Answers2

5

font size 100% on html is equal to browsers default font size, which can be 14px or 16px.

Mohinder Singh
  • 1,848
  • 1
  • 13
  • 14
3

There are many types of declaring the font-size as the same value for the browser.

  1. font-size: 1em;

  2. font-size: 100%;

  3. font-size: 16px; // this is default

This way, you can get the default font-size. But note that 16 px will alter the font-size, however em and % will depend on the font-size used in the body tag.

Fiddle: http://jsfiddle.net/afzaal_ahmad_zeeshan/5Wkus/

So you'll see, em depends totally on the font-declared in body. Or you can say, it runs from child to parent. It keeps looking for the font-size change in the nearest parent. Which in most cases directs the code to the body element or the user agent default stylesheet.

Afzaal Ahmad Zeeshan
  • 15,669
  • 12
  • 55
  • 103
  • The last paragraph is incorrect. What you're seeing is that the font size of `body` is unaffected because you're not actually changing the font size of `html`. It does not cause `html` to take on the font size of `body`. – BoltClock Mar 26 '14 at 22:28