为什么子输入字段比父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;}

我希望文本输入和textarea的宽度应该完全等于父div.但他们不是.谁能解释为什么？

Answer 1

总宽度计算为padding+ width+ 的总和borderWidth.这是盒子模型的默认行为.您可以使用box-sizing属性更改它.在你的情况下:

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