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