爲什麼在給定寬度時<input>元素會丟失其左/右邊距？

<!DOCTYPE html> 
<form> 
    <input type=text> 
</form>

可生產在Chrome以下盒模型：

box model no width

然而，如果輸入類型與寬度樣式：

<!DOCTYPE html> 
<form> 
    <input type=text style="width: 100px;"> 
</form>

左和右邊距被刪除：

enter image description here

這是爲什麼？

看起來用戶代理鉻如果應用的樣式被禁用。 – isherwood

轉載jsfiddle使用鉻以及：http://jsfiddle.net/Jh9ng/ 好問題。我在jsfiddle中製作，因爲imgur在我的工作中被阻止。 – edhedges

你可以在這裏看到更好的：http://jsfiddle.net/isherwood/Jh9ng/1 – isherwood

「內部邊距的目的是爲了防止相鄰控件相互碰撞，特別是對於四捨五入的控件，這看起來很糟糕，您看到這些值發生變化的原因是我們只在設想時才設置內部邊距不會破壞頁面佈局如果作者在控件上指定了明確的高度/寬度，那麼我們假設設計師需要像素精確控制，所以我們關閉頁邊空白以避免中斷頁面佈局。「

2013-11-22 15:53:48 isherwood

令人驚歎。感謝分享深厚的知識。看起來這是Chrome特定的東西。 – HorseloverFat

好消息是，如果您只想刪除內部邊距而不觸摸任何其他樣式，則仍然可以自行設置「邊距」屬性。 – BoltClock

回答