How can i get rid of the space between inlined DIVs

I have the following code (on a xhtml page)

<div style="background-color:#006400;">
    <div i开发者_开发问答d="div1" style="display:inline-block; background-color:#7fffd4;">Content 1</div>
    <div id="div2" style="display:inline-block; background-color:#deb887;">Content 2</div>
</div>

There is a space rendered between div1 and div2. I've set margins, padding, borders to zero, but the result is the same in IE8, Firefox 3.6.13 and Opera 11. Is there a way to get rid of that spacing?

Thanks in advance.

you should try to remove the spaces (the character) between them. (inline elements, kinda like words)

Remove the space between #div1 and #div2

<div style="background-color:#006400;">
    <div id="div1" style="display:inline-block; background-color:#7fffd4;">Content 1</div><div id="div2" style="display:inline-block; background-color:#deb887;">Content 2</div>
</div>

The space character you are getting is a result of layout out your source code neatly with indenting and newlines.