html - 没有计算输入元素的边距，但在指标(和显示)下有边距

Question

我在表格单元格中有一个输入元素，如下所示:

<td><input class="form-control input-small my-input-narrow" type="number"></td>

不幸的是，这个单元格决定了比输入元素的宽度宽得多的列的宽度。

当我检查 Chrome 中的元素时，计算样式选项卡显示:

margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;

但是，当我进入指标并查看视觉效果并将鼠标悬停在边距上时，它显示了一个宽阔的区域作为边距，尽管它的表面显示为“-”作为边距的宽度。 td 的计算样式显示宽度为 219 像素(而输入元素本身为 33 像素)。

你有什么建议可以让我更好地理解渲染为什么会这样吗？

谢谢!

Answer 1

当所有样式都将 padding 设置为 0px 时，我遇到了类似的问题，即 padding 在视觉上显示。在这种情况下，“-”仍然显示在指标区域中。问题是外部元素被设置为固定宽度，因此填充被用来填充被检查元素和具有固定宽度的外部元素之间的间隙。

如果您在 Chrome 开发者工具中检查一个元素，并在指标区域显示“-”时注意到填充或边距，那么很可能就是这种情况。