html - Chrome：在嵌套在 TD 中的 div 上指定宽度会产生较大的右边距

Question

我在 td 标签内指定了一个 div 。一旦我以像素为单位指定了 div 的宽度，除了该宽度之外，Chrome 还会显示一个巨大的右边距，我不明白为什么。我很好奇是否有人可以帮助我理解这一点。

这个 js 示例显示了确切的问题：

https://playcode.io/625077/

但是没有指定宽度，就没有神秘的边距： https ://playcode.io/625261/

此外，似乎有一个比率在起作用：对于我在 div 上指定的每 1 个像素的宽度，我会得到几个像素的神秘右边距。

更新：即使将 div 的边距和填充硬设置为 0 似乎也没有效果，剩下的边距就位：

标签： htmlcsshtml-table

Answer 1

所有 div 都有默认的边距和内边距。您在 tb 元素中的 div 正在执行此操作。如果您删除此 div 标记并让“test”留在您的 tb 元素内，“test”字符串将触及页面的右侧。使用默认的 tb 样式，您会看到它尝试在 tr 元素内的所有 tb 元素之间平均分配给定的总宽度 (100%)。这样做没有空间用于默认 div 元素，该元素不具有相同的适合属性并且也具有特定的边距。tr 元素内的 div 元素的结果比平时长。