为什么 <input> 元素在给定宽度时会丢失其左右边距？答案

【问题标题】：Why does an <input> element lose its left/right margins when given a width?为什么 <input> 元素在给定宽度时会丢失其左右边距？
【发布时间】：2013-11-22 23:58:48
【问题描述】：

以下内容：

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

在 Chrome 中生成以下盒子模型：

但是，如果输入类型使用宽度设置样式：

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

去除左右边距：

这是为什么？

【问题讨论】：

如果应用了样式，看起来用户代理 chrome 被禁用了。
也使用 chrome 在 jsfiddle 中复制：jsfiddle.net/Jh9ng 好问题。我在 jsfiddle 中制作，因为 imgur 在我的工作中被阻止。
你可以在这里更好地看到它：jsfiddle.net/isherwood/Jh9ng/1
这个问题绝对值得+1 ......很好，我不知道为什么，尽管我确信有一个非常合乎逻辑的解释，我只是想不出。
在 FF 中没有发生，所以可能不在规范中，只是 Chrome 错误或特殊行为。也许它为输入验证失败时获得的光芒保留了一点空间？

标签： html google-chrome css

【解决方案1】：

“固有边距的目的是防止相邻控件相互碰撞。特别是对于圆形控件，这看起来很糟糕。您看到值发生变化的原因是我们只在认为它获胜时才设置固有边距'不要破坏页面的布局。如果作者在控件上指定了明确的高度/宽度，那么我们假设设计者需要像素精确的控制，因此我们关闭边距以避免破坏页面布局.”

https://code.google.com/p/chromium/issues/detail?id=128306#c20

【讨论】：

太棒了。感谢分享深厚的知识。看起来这是 Chrome 特有的东西。
好消息是，如果您只想删除内部边距而不触及任何其他样式，您仍然可以自行设置 margin 属性。