Question

I have following code:
In HTML

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

In CSS

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

I observe a space between the divs which I am not able to remove. Any help? Here is the link to jsfiddle source.

Answer 1

That is the whitespace you have included while formatting your HTML. You can set the font size of the parent to zero to fix this.

#container{
    font-size:0;
}

An alternative approach is to format your HTML like this:

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

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