Consider a code:
<div style="width: 10em; float: left; padding: 0; margin: 0">
<input type="text" style="width: 10em"/>
</div>
In fact, the text field does not occupy the entire parent DIV, as one would expect. Why? Thanks in advance for your answers.
the answer is font-sizes.
em is a measurement of ‘size relative to the current font-size’.
since the default font-size of an input element is smaller than a div (due to browser defaults) the 10em equates to a different width.
you can easily fix this by using ‘%’ unit: