Why child input field is wider than parent div [duplicate]

Question

HTML

<div class="wrap">
    <input class="field" type="text">
    <textarea class="field" row="10"></textarea>
</div>

CSS

.wrap{width:300px;overflow:hidden;padding:10px;}
.field{display:block;width:100%;margin:10px 0;padding:10px;}

I expect width of text input and textarea should be exactly equal to parent div. but they are not . can anybody explain why?

Live code

Answer 1

The total width is calculated as a sum of padding + width + borderWidth. This is the default behaviour of the box model. You can change it by using box-sizing property. In your case:

.field {
    ...
    box-sizing: border-box;
}

http://jsfiddle.net/aLz6b/3/

Further reading: http://css-tricks.com/box-sizing/

Answer 2

Its because you have padding applied to the .field remove padding and see it will work.

.field{display:block;width:100%;margin:10px 0;}

OR

you have 100% width set so just set width as below.

.field {
    display: block;
    margin: 10px 0;
    padding: 10px;
    width: 280px;
}