为什么子输入字段比父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完全相等。但他们不是。任何人都可以解释原因吗？

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

这是因为您已将padding应用于.field删除填充，并看到它可以正常工作。

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

或

您设置了100%宽度，只需设置如下宽度。

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

Answer 3

width: 100%属性适用于内容框，而不适用于边框。如果您使用的是CSS3，则可以设置box-sizing: border-box以获得预期的大小。

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

Answer 4

试试这个：

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