Question

我有以下代码：
在HTML中

 <div id="first" ></div>  
 <div id="second"></div>

在CSS中

#first,#second {  
    background-color: red;  
    display: inline-block;  
    width:50px;  
    height:50px;  
    margin:0px;  
    padding:0px;  
    border: 0px;  
}

我在div之间观察到一个我无法移除的空间。有帮助吗？这是link到jsfiddle的来源。

Answer 1

这是格式化HTML时包含的空格。您可以将父级的字体大小设置为零以解决此问题。

#container{
    font-size:0;
}

另一种方法是将HTML格式化为：

<div id="first" ><  
/div><div id="second"></div
/div>...

http://jsfiddle.net/4NQEm/1/

Answer 2

HTML中有空格，因此输出中会有空格。尝试将</div><div id="second">推到一起，两者之间没有空格。

Answer 3

或者，如果您不希望完全混乱的HTML以避免inline-block显示的div之间的空格，您可以使用HTML注释来连接div，as I've described in a more exhaustive way here

    <div id="first" ></div><!--  
 --><div id="second"></div>

Answer 4

要删除两个div之间的空格，您需要设置第二个div负像素的margin-left属性，请检查此link或

#second
{
    margin-left:-4px;
}

内联块div之间不需要的空间

4 个答案: