Question

这是css代码：

#div_0, #div_1 {
    width: 100px;
    height: 100px;
    display: inline-block;
}

#div_0 {
    background-color: #090;
}

#div_1 {
    background-color: #900;
}

这是HTMl

<div id="div_0"></div>
<div id="div_1"></div>

这显示如下： http://jsfiddle.net/7G63S/

如你所见，这里是div标签之间的香料，为了删除这个空间我可以写html所以：

 <div id="div_0"></div><div id="div_1"></div>

并解决了问题： http://jsfiddle.net/7yE2M/

但是，如果html看起来如此，如何用css删除div之间的空格：

<div id="div_0"></div>
<div id="div_1"></div>

？

或者说这不可能？

P.S。 white-space：nowrap 在这种情况下没有帮助。

Answer 1

在包装容器上将line-height和font-size设置为0 - 请参阅http://jsfiddle.net/7G63S/1/

Answer 2

将float:left样式添加到div #div_0, #div_

在这里演示http://jsfiddle.net/7yE2M/1/

Answer 3

您是否希望将空格用于源格式化原因，或者这是无法修改某些生成的HTML的情况？如果你可以修改html，最好的办法就是简单地删除空格，但这并不意味着你需要丢失格式。只需注释掉空白：

<div id="div_0"></div><!--
--><div id="div_1"></div>

修改：可在此处找到更多解决方案http://css-tricks.com/fighting-the-space-between-inline-block-elements/

使用css删除html空格

3 个答案: