How to remove the vertical white line between the two green divs without floating?

Question

How to remove the vertical white line between the two green divs without floating them?

JSFIDDLE - http://jsfiddle.net/ZdS48/

HTML

<div class="left">TODO write content1</div>
<div class="left">TODO write content2</div>
<div >TODO write content3</div>
<div>TODO write content4</div>

CSS

div {
width: 200px;
height: 200px;
background-color: red;
}

div.left {
margin:0;
padding:0;
display:inline-block;
background-color: green;
}

Answer 1

That white line is a space character that is placed between the divs.

<div class="left">TODO write content1</div> <--This new line is considered a space-->
<div class="left">TODO write content2</div>

Remove it and it works.

JSFiddle

---

You can also fix it by setting the body font-size to 0 and the font-size of the div to whatever it should be:

body
{
    font-size: 0;
}

div{
    font-size: 16px;
}

JSFiddle

Answer 2

You need to remove the actual space, in this case the line break, between the two divs in your HTML markup

<div class="left">TODO write content1</div><div class="left">TODO write content2</div>

Instead of:

<div class="left">TODO write content1</div>
<div class="left">TODO write content2</div>

Here is a fiddle: http://jsfiddle.net/uYMaA/

Answer 3

give margin-left to set the position of the div here:

div.left { margin-left:-3.5;}