html - Why are this div and textarea not the same height -

html - Why are this div and textarea not the same height -

see this js fiddle.

html:

<div></div> <textarea>something here...</textarea>

css:

textarea { height: 1em; float:left; padding: 0.5em; border-width: 1px; border-color: #ff0000; border-style: solid; margin: 0; width: 20em; } div { height: 2em; float:left; width: 2em; margin: 0; padding: 0; border-width: 1px; border-color: #ff0000; border-style: solid; margin: 0; }

the em unit dependent on font size.

the default fonts body , textarea not same height (since they're not same font)

i added *{font-family:sans-serif} , height issue fixed itself.

html css