Unwanted space between linline-block divs

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/

Answer 2

The space is there in the HTML, so it will be there in the output. Try shoving the </div><div id="second"> together with no space between them.

Answer 3

Alternatively, if you don't want a completely messed up HTML to avoid spaces between inline-block displayed divs, you can use HTML comments to connect the divs, as I've described in a more exhaustive way here

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

Answer 4

To remove space between two divs you need to set margin-left property of second div negative pixels check this link or

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