`display：inline-block`要素に奇妙なマージン

Question

私はdisplay:inline-blockと6行を1行に入れました。しかし、彼らはお互いの間に奇妙な空白を持っている、どうすればそれを取り除くことができますか？彼らは1つの行に容器に収まる必要があります。

フィドル：http://jsfiddle.net/y7L7q/

HTML：

<div id="container"> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
</div> 

CSS：

#container{ 
    width:300px; 
    border:1px solid black; 
} 
.box{ 
    display:inline-block; 
    height:50px; 
    width:50px; 
    background-color:black; 
    margin:0; 
    padding:0; 
} 

Answer 1

書き込みfont-size:0;。このように：

#container{ 
    width:300px; 
    border:1px solid black; 
    font-size:0; 
} 

チェックこれはhttp://jsfiddle.net/y7L7q/1/

OR

このようなあなたのマークを書く：

<div id="container"> 
    <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div> 
</div> 

チェックこのhttp://jsfiddle.net/y7L7q/2/

Answer 2

それはと共通の問題です。あなたはいくつかの解決策があり、新しい行を削除する（またはコメントする：http://jsfiddle.net/eaqfk/）、font-size: 0を設定し、margin-right: -4pxと設定します。

すべては、この質問には次のとおりです。CSS: Spacing issue with dropdown

Answer 3

それらはインラインブロックに設定されているので、これはそれらの間の空白がインライン空白として扱われ、したがって、そのようなとしてレンダリングされることを意味します。あなたは、HTMLに1行にすべてのdivを置くか、コメントで空白をラップすることにより、いずれかの方法でこの問題を解決することができます

<div class="box"></div><!-- 
--><div class="box"></div> 

Answer 4

代わりの表示：インラインブロック、floatを使用します。不要なスペースを削除するために残しました。これをチェックしてください。

http://jsfiddle.net/y7L7q/9/

また、そのフォントサイズの点に注意してください。0は、それが台無しにそれらのdiv内のコンテンツを意志として、私の意見では正しいアプローチではありません。