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值”。

EG。有些浏览器的背景颜色为灰色/黄色，其他浏览器则为白色。

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

例如

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

andc ..

总视觉宽度=填充+宽度+边框

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

同样适用于高度：）

Answer 2

我猜这是因为你有一个1px边框，总共为该元素添加了2px。如果是这种情况，您仍然可以保留边框，但应该添加box-sizing或使用outline代替。

表td宽度超过指定的2px

2 个答案: