html - 线块 div 之间不需要的空间

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 之间的空间。有什么帮助吗？这是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，正如我在此处以更详尽的方式描述的那样

    ​&lt;div id="first" >​&lt;/div><!--  
 --><div id="second"></div> 

Answer 4

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

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