title: Whitespace between DIVs disrupting the layout
body: <p>Let's say I have the following HTML/CSS to have two columns of DIVs, each 50 pixels wide.</p>
  
  <pre><code>&lt;div style="width:100px;margin:0px;"&gt;
      &lt;div style="width:50px; display:inline-block;"&gt;A&lt;/div&gt;&lt;!-- HERE --&gt;
      &lt;div style="width:50px; display:inline-block;"&gt;B&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In this snippet of code, if I do not have any whitespace between two inner divs (i.e. where <code>&lt;!-- HERE --&gt;</code> is):</p>
  
  <pre><code>&lt;div style="..."&gt;
      &lt;div style="..."&gt;&lt;/div&gt;&lt;div style="..."&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Then the HTML is rendered in two columns, 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.</p>
  
  <p>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.</p>
  
  <p>Is there any solution to this, so that the two inner DIVs are rendered as expected, even when there are whitespaces between them?</p>