CSS显示:inline-table = strange 1px margin right on div

Question

我正在编写我的小CSS框架，但是我遇到了一个奇怪的问题，请检查这个jsfiddle:http://jsfiddle.net/76y8B/

正如你所看到的，红色div有1px margin right，但我将所有设置为margin:0;

请问有什么帮助吗？

Answer 1

您的计算错误。您已经调整了 div 的大小到 body 的96%。假设 body 宽为 1000 像素，这意味着 div 现在为 960 像素。然后，在左侧和右侧为其指定 2% 的填充，即 960 像素的 2%，或两端 19.2 像素。 960+19.2+19.2 = 998.4 像素总宽度。这就是微小差距的来源。

在不修复其他标记的情况下解决此问题的唯一方法是纠正填充的计算原点，即。将填充设置为不 (100-96)/2但是((100/96)-1)/2或 2.08333%。因此，以下解决了这一差距:

.heading {
    padding: 13px 2.08333% 8px;
}

或者您可以使用border-box要更改这些值的计算方式，请参阅 this other answer here .