CSSでイメージ間のスペースを取り除く方法は？

Question

this websiteに示すように、<div>sの間にレンダリングされるスペースがあります。私はマージン、パディング、ボーダーを0に設定しましたが、そのトリックはしませんでした。それらの間隔を取り除く方法はありますか？ここ

（赤枠が実証のために純粋であり、問​​題が固定取得する場合に除去される）コードである：

<style type="text/css"> 
    body{margin: 0 auto;} 
    #content{text-align:center; float:center; white-space:nowrap;} 
    .content-left{width:200px; display: inline-block; border:1px solid red; vertical-align:top;} 
    .content-center{width:950px; display: inline-block; border:1px solid red; vertical-align:top;} 
    .content-right{width:300px; display: inline-block; border:1px solid red; vertical-align:top;} 
</style> 

<div id="content"> 
    <div class="content-left"><img src="images/imglft.jpg" /></div> 
    <div class="content-center"> 
    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="950" height="1000" id="index" align="middle"> 
      <param name="allowScriptAccess" value="sameDomain" /> 
      <param name="movie" value="index.swf" /> 
      <param name="menu" value="false" /> 
      <param name="quality" value="high" /> 
      <param name="bgcolor" value="#000000" /> 
      <embed src="index.swf" menu="false" quality="high" bgcolor="#000000" width="950" height="1000" name="index" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> 
     </object> 
    </div> 
    <div class="content-right"><img src="images/imgrt.jpg" /></div> 
</div> 

Answer 1

てみ使用font-size: 0;と子供たちに自分のフォントサイズに戻しますのように...

または：親にword-spacing: -.43em;を使用して、子どもたちにword-spacing: 0em;に戻す...

私はそれをテストし、それが動作するように見えました。

Answer 2

display: inline-block;がそれを引き起こしています。このようにして、<div>はインラインテキストであるかのように動作します。 </div>と<div>の間の空白を削除すると、通常のテキストと同様に問題が消えます。

代わりに、左に浮動小数点数を入力したい場合は、float: left;を使用してください。

Answer 3

BalusC： "表示：インラインブロック：これが原因です。divはインラインテキストのように動作します。"
これは間違いありません。

問題

これはあなたの<div> -elements間の改行文字によって引き起こされます。
参照サンプル：http://jsfiddle.net/yZQNf/1/

サンプルコード

HTML

<div id="wrapper"> 
    <div class="inline">123</div> 
    <div class="inline">456</div> 
</div> 

<br /> 

<div id="wrapper"> 
    <!-- No newline between divs --> 
    <div class="inline">123</div><div class="inline">456</div> 
</div> 

その後、CSS親#content上

#wrapper { 
    border: 1px solid red; 
} 

.inline { 
    border: 1px solid blue; 
    display: inline-block; 
}