Почему входной ребенок поле шире, чем родительский DIV

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;} 

Я ожидаю, что ширина текстового ввода и текстовое поле должно быть точно равно родительскому дел. но это не так. может ли кто-нибудь объяснить, почему?

Live code

Answer 1

Общая ширина вычисляется как сумма padding + width + borderWidth. Это поведение по умолчанию для модели коробки. Вы можете изменить его, используя свойство box-sizing. В вашем случае:

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

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

Дальнейшее чтение: http://css-tricks.com/box-sizing/

Answer 2

width: 100% свойство относится к блоку контента, а не на границе окна. Если вы используете CSS3, вы можете установить box-sizing: border-box для получения ожидаемого размера.

http://www.w3.org/TR/css3-ui/#box-sizing0

Answer 3

Его, потому что у вас есть padding прикладывается к .field удалить отступы и увидеть это будет работать.

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

ИЛИ

у вас есть 100% ширина устанавливается таким образом, просто установить ширину, как показано ниже.

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

Answer 4

Попробуйте это:

.wrap{width:300px;overflow:hidden;padding:10px 0px;}