This is my HTML code
use line-height: 0px;
WORKING DEMO
The CSS Code:
div{line-height:0;}
This will affect generically to all your Div's. If you want your existing parent div only to have no spacing, you can apply the same into it.
HTML
<div id="div1">
<div></div><div></div><div></div><br/><div></div><div></div><div></div>
</div>
CSS
#div1 {
width:150px;height:100px;white-space:nowrap;
line-height: 0px;
border:blue 1px solid;padding:5px;
}
#div1 div {
width:30px;height:30px;
border:blue 1px solid;
display:inline-block;
*display:inline;zoom:1;
margin:0px;outline:none;
}
DEMO
Using a <br/>
for making a new row it's a bad solution from the start.
Make your container #div1 to have a width equal to 3 child-divs.
<br/>
in my opinion should not be used in other places than paragraphs.
Although probably not the best method you could add:
#div1 {
...
font-size:0;
}
Add line-height: 0px;
to your parent div
jsfiddle: http://jsfiddle.net/majZt/
You need this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<-- I absolutely don't know why, but go ahead, and add this code snippet to your CSS -->
*{
margin:0;
padding:0;
}
That's it, have fun removing all those white-spaces problems.