Why child input field is wider than parent div

[Dok2000]

HTML\[code\]<div class="wrap"> <input class="field" type="text"> <textarea class="field" row="10"></textarea></div>\[/code\]CSS\[code\].wrap{width:300px;overflow:hidden;padding:10px;}.field{display:block;width:100%;margin:10px 0;padding:10px;}\[/code\]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