title: Why is there an unexplainable gap between these inline-block div elements?
body: <p>I have two inline-block <code>div</code> elements, that are the same, positioned next to eachother. However there seems to be a mysterious space of 4 pixels between the two divs despite the margin being set to 0. There are no parent divs effecting them - What is going on?</p>
  
  <p>CSS</p>
  
  <pre><code>#container
  {
      display:inline-block;
      position:relative;
      background:rgb(255,100,0);
      margin:0px;
      width:40%;
      height:100px;
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/PMpSD.png" alt="Div problem"></p>
  
  <p>This is what i want it to look like:</p>
  
  <p><img src="https://i.stack.imgur.com/vPMqH.png" alt="What it SHOULD look like"></p>