width - CSS百分比宽度减去固定宽度

Question

我有一个填充，我想在基于 procent 的设计中减去。打字区有那个填充，但使输入的长度超过 100%。

谁能解释一下我的 CSS 有什么问题:

input[type='text'] {
    padding:5px;
    width:calc(100% - 10px);
}

<input type="text" name="username" id="username" value="Username" />

Answer 1

为什么不直接使用:

input[type='text'] {
    padding:5px;
    box-sizing:border-box;
    width:100%;
}

参见 this fiddle和 this article about box-sizing