如何摆脱CSS中图像之间的空白？

Question

在<div>之间有空格，如this website所示。我已将边距，填充，边框设置为零，但没有成功。有没有办法摆脱这些间距？

这里是代码（红色边框纯粹是为了示范，如果问题得到修复将被删除）：

<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;对父母#content，然后返回到您的字体大小对儿童像font-size: 12px; ...

或者：对父用word-spacing: -.43em;，并返回到word-spacing: 0em;儿童...

我测试了一下，似乎它会工作。

Answer 2

的display: inline-block;是造成这一点。这样<div>的行为就好像它们是内嵌文本一样。如果删除</div>和<div>之间的空格，则问题会消失，就像正常文本一样。

反而使用float: left;而不是如果你想要的只是把它们左移。

Answer 3

As BalusC声明：“display：inline-block;正在导致这种情况，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

#wrapper { 
    border: 1px solid red; 
} 

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