CSS procent width减去固定宽度

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