no margin or padding - but still space between div elements

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.