title: Remove unwanted margin due to line-break in HTML
body: <p>I get an unwanted margin between <code>block1</code> and <code>block2</code> with <code>display: inline-block</code> style. See this <a href="http://jsfiddle.net/SbUwt/" rel="nofollow">jsFiddle</a>.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="innercontainer"&gt;
          &lt;div id="block1"&gt;
              block1
          &lt;/div&gt;
          &lt;div id="block2"&gt;
              block2
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>* {
      margin: 0px;
      padding: 0px;
  }
  #container {
      background-color: #f00;
      width: 100%;
      height: 200px;
  }
  #innercontainer {
      background-color: #0f0;
      width: 200px;
      height: 200px;
      margin: 0px auto;
  }
  #block1, #block2 {
      display: inline-block;
      background-color: #00f;
      height: 200px;
  }
  </code></pre>
  
  <p>The margin disappears when I change the HTML to this:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="innercontainer"&gt;
          &lt;div id="block1"&gt;
              block1
          &lt;/div&gt;&lt;div id="block2"&gt;
              block2
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>or this:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="innercontainer"&gt;
          &lt;div id="block1"&gt;
              block1
          &lt;/div&gt;&lt;!--
       --&gt;&lt;div id="block2"&gt;
              block2
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>While I prefer the latter, I still do wonder if anyone knows a solution so I can use the original HTML, but no whitespace shows up in <code>innercontainer</code>. Also note that I want to avoid setting <code>float: left;</code> on both <code>block1</code> and <code>block2</code> or making them floating by <code>position: absolute|relative</code> because that generates other problems in my layout. Any ideas?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Ok, so I had more trouble with my layout. When I added an image to block1, the whole block moved down, very strange (see <a href="http://jsfiddle.net/AbKMJ/" rel="nofollow">jsFiddle</a>). I am now using <code>float: left</code> and will have to figure out how I can add a div that consumes the free-space on the right.</p>