16 ピクセルの正方形の透明 PNG ファイルを 10 個使用して、イメージ スプライトを作成する必要がありました。そこで、背景色のある div 内に 10 個の画像を含む単純な HTML ページを作成しました。簡単な CSS を追加して、div をコンテンツに合わせ、パディングやマージンなどを削除しました。
Firebug を使用する Firefox で、div の幅を調べたところ、196 x 21 ピクセルであることがわかりました。画像間の空白がはっきりとわかります。私が知る限り、マージン、パディング、ボーダーはありません。
代わりに、画像を div 内にフロートすると、160 x 16 ピクセルの測定値が得られます (これは当初予想していたものです)。
Chrome と IE でもこのページを確認しましたが、同じ結果が得られました。だから私は動作が標準のどこかに記述されなければならないと思いますか?
画像の周りに追加された余白がどこから来たのか知りたいです。
（これが他の場所で答えられていたらすみません）
<img />これは、タグ間の空白のように聞こえます。
HTML が次の場合:
<img src="/path/to/image/1.png" />
<img src="/path/to/image/2.png" />
<img src="/path/to/image/3.png" />
次に、画像を別の行に書いた場合に単語間にスペースを入れるのと同じように、画像間にスペースを入れます。
HTML を次のように記述した場合:
<img src="/path/to/image/1.png" /><img src="/path/to/image/2.png" />
その場合、画像間に空白はありません。
inlineこれは、およびinline-block要素 (img要素は)の「期待される」動作ですinline-block。
Chris Coyer の記事Fighting the space between inline block elementsに示されているように、これを回避する方法がいくつかあります。
下のスペースのことですか？もしそうなら、私は同様の質問への答えを持っています
https://stackoverflow.com/a/15357037/1061567
他の問題について話している場合は、 http://jsfiddle.netでいくつかの例を示して、より明確にしてください。