no margin or padding - but still space between div elements

Question

Its not the first time that this is confusing me.

<div id="wrap">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>

#wrap {
width:400px;
height:200px;
background:red;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

.content {
width:100px;
height:200px;
display:inline-block;
background:green;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

You may get a better understanding when viewing it on JSFiddle

JSFiddle Example

For my understanding the four divs should fit exactly inside the parent div, but there is a space in between them - and i dont understand where its coming from.

would be great if somebody could clear this up for me.

Answer 1

This is due to font-size. You will need to set font-size: 0px on the #wrap element. http://jsfiddle.net/52eaz/