Whitespace between DIVs disrupting the layout

Let's say I have the following HTML/CSS to have two columns of DIVs, each 50 pixels wide.

<div style="width:100px;margin:0px;">
    <div style="width:50px; display:inline-block;">A</div><!-- HERE -->
    <div style="width:50px; display:inline-block;">B</div>
</div>

In this snippet of code, if I do not have any whitespace between two inner divs (i.e. where <!-- HERE --> is):

<div style="...">
    <div style="..."></div><div style="..."></div>
</div>

Then the HTML is rendered in two columns, 开发者_StackOverflow中文版as expected. However, if I have any whitespace between them, they're not rendered side-by-side, because the whitespace character take up nonzero width.

The obvious solution to this is to not have any whitespaces between the inner DIVs, however, I'm using HTML autoformatter to format my HTML code, and it automatically inserts whitespace between the two inner DIVs.

Is there any solution to this, so that the two inner DIVs are rendered as expected, even when there are whitespaces between them?

---

Add white-space:nowrap; word-spacing:0; to the 100px container.

No floats, positioning, etc.

<div style="width:100px;margin:0px;white-space:nowrap; word-spacing:0;">
    <div style="width:50px; display:inline-block;background:#efefef;">A a</div><!-- HERE --><div style="width:50px; display:inline-block;background:#ccc;">B b</div>
</div>

Here's the fiddle: http://jsfiddle.net/3yQ6L/2/

---

What about

div style="width:100px;margin:0px;">
<div style="width:50px; display:inline-block;">A</div><!-- 
--><div style="width:50px; display:inline-block;">B</div>

or if you're using php etc

    div style="width:100px;margin:0px;">
<div style="width:50px; display:inline-block;">A</div><? /*
*/ ?><div style="width:50px; display:inline-block;">B</div>

dunno if that'd help

---

You can float the inner divs and add overflow: hidden to the outer:

<div style="width:100px;margin:0px;overflow:hidden;">
    <div style="width:50px; float: left;">A</div>
    <div style="width:50px; float: left;">B</div>
</div>

http://jsfiddle.net/ambiguous/3yQ6L/1/

---

Inline-block will behave like an image, or a text character for that matter, so the space between them will be dependent on font size.

You could try to float them to the left, or you could try to set the font size very low. You could also try a negative left margin on the second box.