Question

以下内容：

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

为什么会这样？

Answer 1

“内在边距的目的是试图防止相邻的控件彼此对接。特别是使用圆形控件这看起来很糟糕。你看到价值变化的原因是我们只有在我们认为它赢了时才设定内在边距不会破坏页面的布局。如果作者在控件上指定了明确的高度/宽度，那么我们假设设计师需要像素精确控制，因此我们关闭边距以避免破坏页面布局“

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