为什么给<input>元素设置宽度后左/右边距会消失？

Question

13

以下内容：

<!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

为什么会这样？

- HorseloverFat

看起来如果应用了样式，用户代理 Chrome 就被禁用了。 - isherwood

你可以在这里更好地查看：http://jsfiddle.net/isherwood/Jh9ng/1 - isherwood

那个问题绝对值得一个+1...很好的问题，我不知道为什么，虽然我确信有一个非常逻辑的解释，只是我想不出来。 - Laurent S.

在Firefox中没有发生，所以可能不在规范中，只是Chrome的一个bug或特殊行为。也许它为输入验证失败时出现的发光效果保留了一点空间？ - SpliFF

无法确定。我还没有遇到过一种风格会以这种方式影响另一种风格的情况。 - isherwood

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- isherwood · Accepted Answer

"内在边距的目的是尝试防止相邻控件互相对齐。特别是对于圆角控件，这看起来很糟糕。您看到值变化的原因是我们仅在认为不会影响页面布局时设置内在边距。如果作者在控件上指定了显式高度/宽度，则我们假定设计师需要像素精确控制，因此关闭边距以避免干扰页面布局。"