3

I always thought that body font and input font were separate. For example, if I have this for my HTML:

<div>some test text</div>
<input type="text"/>

and then this for my CSS:

body {
  font:2em verdana;
}

then only the div font is large and the input text stays small. But if I add this CSS:

input {
  font-size:1em;
}

then the input font size takes on the body font size. why?

Ryan
  • 5,883
  • 13
  • 56
  • 93
  • Did you try using a more specific selector? – Kyle Aug 21 '12 at 06:45
  • 1
    Here is a good explanation: http://stackoverflow.com/a/2875030/731323 – DanielB Aug 21 '12 at 06:49
  • possible duplicate of [Why – Jukka K. Korpela Aug 21 '12 at 07:37

1 Answers1

3

you're right with your first sentence: input elements usually don't inherit font-sizes.

with using em this doesn't work anymore, because 1em is, by definition, the font-size of an element - and if you set the font-size to em, it's based on the parent-elements font-size, because the element itself doesn't have an absolute font-size anymore.

so using font-size: 1em on inputs is basically kind of like using font-size: inherit for inputs and px for the body-setting.

oezi
  • 51,017
  • 10
  • 98
  • 115