私のDIVの右側に小さなマージンが表示されるのはなぜですか？

Question

私は586px幅の大きなDIVを持っています。この中には2つの小さいDIVがあり、両方とも266pxの幅です。

私はページをプレビューすると、それらの間に小さな余白があります。 Inspect Elementでこれをトラブルシューティングしようとしましたが、メトリックに余分な余白が見つかりませんでした。

CSS：

#category-results { width: 586px; height: 1000px; background-color: fuchsia; }

.category-item-full { height: 158px; width: 266px; background-color: green; position: relative; display: inline-block; margin: 0px; }

HTML：

<div id="category-results">

    <div class="category-item-full"> 
        </div> 

        <div class="category-item-full"> 
        </div> 

</div>

Answer 1

あなたのCSSでdisplay: inline-block;を削除してください。
それとも、あなたがそれを必要とする場合、HTMLに<div> sの間の空白を削除します。

<div class="category-item-full"> 
</div><div class="category-item-full"> 
</div> 

Answer 2

divの間に空白スペースがあるからです。それらを締め、それは遠ざかります。 Example jsFiddle。

Answer 3

てみCSSのリセットを。ここにあなたを始めるためのものがあります：CSS Tools: Reset CSS。そして、Googleを離れて "CSSリセット"をしてください。最後に、tuts+ networkは非常に役に立ちます。

Answer 4

display: inline-blockを取り除き、float: leftに置き換えてみてください。動作するように見え、 "インラインブロック"とは違って標準的なCSSです。