3

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

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

但是，当我查看指标并查看视觉对象并将鼠标悬停在 Margin 上时，它会显示一个很大的区域作为边距，尽管它说“-”作为边距的宽度。td 的计算样式显示宽度为 219 像素（而输入元素本身为 33 像素）。

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

谢谢！

4

1 回答 1

2

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

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

于 2015-02-13T09:21:45.437 回答