如何删除两个绿色div之间的垂直白线而不浮动？

Question

如何删除两个绿色div之间的垂直白线而不浮动它们？

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

白线是放在div之间的空格字符。

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

删除它，它可以工作。

JSFiddle

---

你也可以通过将body font-size设置为0并将div的font-size设置为它应该是的来修复它：

body
{
    font-size: 0;
}

div{
    font-size: 16px;
}

JSFiddle

Answer 2

您需要删除HTML标记中两个div之间的实际空格，在本例中为换行符

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

而不是：

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

这是一个小提琴：http://jsfiddle.net/uYMaA/

Answer 3

给margin-left设置div的位置 这里：

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