Question

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?

Answer 1

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.