CODEWITHSUNDEEP
csshtmlinput
Andrey Esperanza
Andrey Esperanza

Reputation: 625

Why <input type="text"> has a less actual size than specified?

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.

Upvotes: 2

Views: 408

Answers (3)

Justin McDonald
Justin McDonald

Reputation: 2166

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:

<input type="text" style="width:100%"/>

Upvotes: 3

leepowers
leepowers

Reputation: 38318

Try using a 100% width instead of an em width:

<div style="width: 10em; float: left; padding: 0; margin: 0">
  <input type="text" style="width: 100%"/>
</div>

Note that the text field will still have a padding and border - so a width of 100% will overflow the containing div.

Upvotes: 1

Moiz
Moiz

Reputation: 2439

<!DOCTYPE html>
<html>
    <head>
        <title> problem </title>
    </head>
    <body>
       <div style="width: 10em; float: left; padding: 0; margin: 0;background-color:red;">
  <input type="text" style="width: 100%; padding:0; margin:0"/>
</div>
    </body>
</html>

Upvotes: 0

Related Questions