Question

我将我的主要div放到了0 auto;，仍然有正确的边距我应该怎么做才能删除它？

body  {
       margin: 0;
       padding: 0;
       background: #EEE;
       font: 10px/13px 'Lucida Sans',sans-serif;
    }

    .wrap {
       overflow: hidden;
       margin: 10px;
       background-color: #fff;
       margin: 0 auto;
    }

    .box {
       float: left;
       position: relative;
       width: 14%;


    }

    .boxInner img {
        background-color: black;
       width: 100%;
       display: block;
       -webkit-filter: grayscale(100%);
       -moz-filter: grayscale(100%);
       -o-filter: grayscale(100%);

    }

Answer 1

尝试

.wrap {
  margin: 0 0 0 auto;
}
.box {
  width: 14.25%;
}

这个想法是放大框宽度和设置边距，使其“显示”没有右边距。

http://jsfiddle.net/sz3MD/10/

Answer 2

@beautifulcoder解决方案很好但不太正确。此问题与.wrap页边距或填充无关，“右边距”实际上是.wrap内容的一部分。

网格中有16个元素，如果以7 .box个元素（每行）的百分比计算总宽度，每个元素的宽度为14％，结果为98％，因此剩余2％总宽度的宽度就是你所说的“右边距”，它实际上是元素内容的一部分。

如果您使用14.25％仍然有一点空白，那么您应该使用14.285714286%（结果为100/7）而不是14%或14.25%来解决问题。 CSS允许您使用这样的大数字而不会出现问题，所以不要担心大小。

也不要使用margin: 0 0 0 auto。正如我刚才解释的那样，不是保证金问题所以你不需要这个属性。除非指定宽度，否则甚至可以删除属性margin: 0 auto，因为当包裹的宽度为100％时，它将永远不会有边距。

这是example来展示

之间的差异

.wrap {
    width: 80%;
    margin: 0 0 0 auto;
}

.box {
    width: 14.25%;
}

和

.wrap {
    width: 80%;
    margin: 0 auto;
}

.box {
    width: 14.285714286%;
}

将div定位到中间后删除右边距

2 个答案: