如何擺脫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; 
}