html - table td width 指定多2px

Question

我有一个包含以下 CSS 的表格:

width: 100%;
border-spacing: 0px;
table-layout: fixed;

然后我用以下类指定了 3 列:

@UsedColumnWidth: 26px;
@DeleteColumnWidth: 18px;

.UsedCountColumn {
    width: @UsedColumnWidth;
}
.DeleteColumn {
    width: @DeleteColumnWidth;
}
.CapabilityColumn {
    /*width: @ContainerWidth - @UsedColumnWidth - @DeleteColumnWidth;*/
    /*width: 100px;*/
}

我在查看 chrome 开发人员工具时注意到我的 UsedCountColumn 和 DeleteColumn 的宽度比我指定的多 2 个像素，我无法弄清楚为什么会发生这种情况。我认为边界间距可能搞砸了，但我将其设置为 0。关于为什么会发生这种情况有什么想法吗？

Answer 1

这就是为什么它添加填充而不显示它的原因。我认为您正在使用 LESS :)

如果我们谈论的是“浏览器默认 css”，那么肯定会有一些填充和边距。

人们制作 reset.css 文件的原因是浏览器有不同的“默认 css 值”。

例如。一些浏览器的背景是灰色/黄色，而其他浏览器则完全是白色。

为了确保更好的布局并使其在其他浏览器中看起来相同，您需要进行 css 重置。

例子。

* {
   margin: 0;
   padding: 0;
   /* ect styles */
}

还有……

总视觉宽度 = padding + width + border

总填充宽度=填充+边距+宽度+边框

同样适用于 height ofc :)