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

Question

下列:

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

在Chrome中生成以下框模型:

箱型号没有宽度

但是,如果输入类型的样式为宽度:

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

删除左右边距:

在此输入图像描述

为什么是这样？

Answer 1

"内在边缘的目的是试图防止相邻控件彼此对接.特别是使用四舍五入的控制,这看起来很糟糕.你看到价值变化的原因是我们只在我们认为它不会中断时设定内在边距页面的布局.如果作者指定的控制明确的高度/宽度,那么我们假设设计者需要像素精确的控制,所以我们把利润率关闭以避免破坏页面布局. "