title: Unwanted spaces when using display: inline-block
body: <p>i created a super simple html and css file to test display: inline-block, but when i test it there is some unwanted spaces between the boxes...<br />
  Html:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;link href="Mall.css" rel="stylesheet" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div style="background-color:red;"&gt;&lt;/div&gt;
      &lt;div style="background-color:blue;"&gt;&lt;/div&gt;
      &lt;div style="background-color:green;"&gt;&lt;/div&gt;
      &lt;div style="background-color:yellow;"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body {
      padding: 0px;
      margin: 0px;
      width: 100%;
  }
  
  div {
      display: inline-block;
      margin: 0px;
      padding: 0px;
      width: 50px;
      height: 50px;
  }
  </code></pre>
  
  <p>I removed all paddings and margins from the div tags and the body tag, however when i run the html in chrome it produces this result:
  It is 3 pixels between the divs and 5 pixel beneth them so the total height of the body is 55 pixels when it should only be 50.</p>
  
  <p><img src="https://i.stack.imgur.com/0aSYS.png" alt="imgur"></p>
  
  <p>I have found a weird way to fix this which makes me think that this is an issue with the webbrowser and not the code, if i change the CSS to <code>display: block</code> it will show my divs as normal in a diagonal line and whitout any weird spaces inbetween them.
  Now if i open the developer tools in chrome and change the display in the style of one of the divs to inline-block they all line up horizantally and whitout any unwanted spaces.</p>
  
  <p><img src="https://i.stack.imgur.com/V9EjE.png" alt="image-tag"></p>
  
  <p>Anyone have any idea why it behaves like this?</p>