余白のないインラインブロック？

Question

私はいくつかのDIVをインラインブロックとして表示しています。ブラウザからそれらの間に間隔が自動的に適用されるように見えます。マージン/パディングは0に設定されています。負のマージンを使用せずにこれを修正する方法はありますか？

Answer 1

サム、あなたが見ているスペースは実際には空白です。そのため、パディングとマージンを削除することは何もしません。私に説明させてください。

HTML

<div> 
    a 
    a 
    a 
    a 
</div> 

が、これはそれがレンダリングされます方法です：

a a a a 

...右？あなたはこれを持っている場合

<div> 
    <div style="display:inline-block"></div> 
    <div style="display:inline-block"></div> 
    <div style="display:inline-block"></div> 
</div> 

...あなたは同じものを得るでしょう：あなたは、これは持っている場合

ので、

block [space] block [space] block 

は今...この問題には多くのさまざまなソリューションがあります。私は、最も一般的なHTMLで空白をコメントアウトされたと信じて：

<div> 
     <div style="display:inline-block"></div><!-- 
     --><div style="display:inline-block"></div><!-- 
     --><div style="display:inline-block"></div> 
    </div> 

でも、私はそれを好きではない - 私は、できるだけきれいなHTMLを維持することを好みます。私の好みの方法は、親のfont-sizeを0に設定してから、インラインブロック自体に目的のフォントサイズを戻すことです。

div { 
    font-size: 0; /* removes the whitespace */ 
} 

div div { 
    display: inline-block; 
    font-size: 14px; 
} 

Answer 2

元の余白をオフセットするために、余白を使用する必要はありません。

代わりに、以下でそれらを上書きすることができます。

* { margin:0; }

か：

.div { margin:0; }

それは要素の特定だ場合。

EDIT：

問題が意図しない空白の結果である可能性が表示されます。例：

<div style="display:inline-block"> 
    ... 
</div> 
<div style="display:inline-block"> 
    ... 
</div> 

2つのディバイダの間に空白が存在するため、ブラウザは結果として空白を印刷します。これを修正するには、次のように変更する必要があります。

<div style="display:inline-block"> 
    ... 
</div><div style="display:inline-block"> 
    ... 
</div> 

お楽しみください！

Answer 3

インラインブロックは、IE6は、これはそのために使用したものである

をハック元々ある：に浮かべ要素

にIE6ダブルマージンバグを修正するには

• ので、同様同じ水平線に複数のブロック状要素を配置する 浮動しないで（例外的なケースを浮かべることができない場合）
• インラインelemenあなたたいが、お互いの横に複数のdivを持つfloatを使用してくださいあれば、そのつもりはの多くを解決するインライン要素は、パディングやマージン

を持つことができるようにするにはまだ 残りのインライン

ながら幅および/または高さを持っているトンインラインブロックが発生する可能性がありますことをごCSSの問題、特にクロスブラウザはインラインブロックhere arcticle 9.2.4

敬具 SP

について

詳細を発行

Answer 4

私はあなたがそのスペースを削除するためにdisplay: inline-blockとfloat: leftの両方を使用することができます方法は私のために親コンテナの作品に単語の間隔を変更することhttps://jsfiddle.net/1ex5gpo3/2/

.parent { 
    word-spacing: -1em; 
} 

.child { 
    word-spacing: normal; 
    display: inline-block; 
} 

Answer 5

を発見した別の方法を反対したら、コメントしてください。

ここにplunkr：https://plnkr.co/edit/Sn3NG77asiXO8UrrpxWD?p=preview