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 的大小设置为主体的 96%。假设正文是 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 .