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。

Answer 2

另一个解决方案是设置100％宽度和更冷box-sizing：border-box。

.heading {
    /* new stuff */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    /* end of new stuff */    
    clear: both;
    color: #FFFFFF;
    line-height: 25px;
    margin: 0;
    min-height: 28px;
    padding: 13px 2% 8px;    
}

Running demo

详细了解Box-sizing和differences between the W3C Box model and the Traditional Box Model：

盒子模型


在W3C box model中，元素的宽度会显示该框内容的width，不包括padding和border。

在traditional box model中，元素的宽度会在框的边框之间显示width，包括padding和border。

Answer 3

该元素具有显示属性inline-table。是每个设计？结合2％+ 2％+ 96％的逻辑是造成保证金的因素，将其改为inline-block并且你会看到。

Answer 4

display:inline-table中的{p> .row-fluid导致问题。

删除它或写display:block。

Updated fiddle here.

CSS显示：内联表=奇怪的1px右边的div

4 个答案: