输入元素没有计算边距，但度量（和显示）下的边距答案

【问题标题】：No computed margin for input element, but margin under metrics (and display)输入元素没有计算边距，但度量（和显示）下的边距
【发布时间】：2013-08-05 01:02:20
【问题描述】：

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

<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 像素）。

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

谢谢！

【问题讨论】：

您没有使用表格进行布局，是吗？无论如何，表格单元格的宽度是由整个表格的宽度决定的。
不用于布局，它是一个实际的表格。是的，我明白了 - 但我通过明确设置单元格的宽度而不是百分比来解决问题。

标签： html css twitter-bootstrap

【解决方案1】：

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

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

【讨论】：