Question

如this website所示，<div>之间有空格呈现。我将边距，填充，边框设置为零，但没有做到这一点。有没有办法摆脱这些差距？

以下是代码（红色边框仅供演示，如果问题得到解决，将会删除）：

<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

display: inline-block;导致了这一点。这样<div>的行为就好像它们是内联文本一样。如果删除</div>和<div>之间的空格，则问题就会消失，就像普通文本一样。

而是使用float: left;代替，如果您想要的只是将它们向左浮动。

Answer 2

尝试在父font-size: 0;上使用#content，然后将其返回到font-size: 12px;等儿童的字体大小...

或者：在父级上使用word-spacing: -.43em;并将其返回给word-spacing: 0em;儿童......

我测试了它，似乎它会起作用。

Answer 3

正如 BalusC 所述：“显示：inline-block;正在造成这种情况。这些div的行为就好像它们是内嵌文本一样。”
这绝对是正确的。

问题

这是由<div> - 元素之间的换行符char引起的 参见示例： 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;
}

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

3 个答案:

问题

示例代码

HTML

CSS