0

メインの div を配置しましたが0 auto;、まだ適切なマージンがあります。それを削除するにはどうすればよいですか?

ここにフィドルの例があります: http://jsfiddle.net/sz3MD/9/

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%);

    }
4

2 に答える 2

1

@beautifulcoder ソリューションは優れていますが、完全には正しくありません。この問題はマージンやパディングとは関係ありません.wrap。「右マージン」は実際には.wrapコンテンツの一部です。

グリッドには 16 の要素があり、それぞれが幅の 14% の 7 つの要素 (行ごと) のパーセンテージで合計幅を計算する.boxと、結果は 98% であるため、合計幅の残りの 2% の幅が実際には要素コンテンツの一部である「右マージン」を呼び出します。

14.25% を使用する場合、まだ少し空白があるため、問題を解決する代わりに( 14.285714286%100/7 の結果) を使用する必要があります。CSS では、このような大きな数を問題なく使用できるため、サイズについて心配する必要はありません。14%14.25%

どちらも使用しないでくださいmargin: 0 0 0 auto。先ほど説明したように、マージンの問題ではないため、このプロパティは必要ありません。margin: 0 autoラップの幅が 100% であるためマージンがなくなるため、幅を指定しない限り、プロパティを削除することもできます。

違いを示す例を次に示します。

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

.box {
    width: 14.25%;
}

と

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

.box {
    width: 14.285714286%;
}
于 2013-11-09T17:10:10.620 に答える