title: HTML CSS strange gaps between divs
body: <p>Please see the below code and screenshot.  Can anyone please explain why there are white gaps between the divs and how to remove them? I would like the divs sit next to one another without any margin between them</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>![
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;style&gt;
          body {
              color: #b3b3b3;
              font-family: arial;
              font-size: 14pt;
          }
  
          #containerdiv {
              width: 1184px;
              height: 626px;
              position: absolute;
              margin-top: -338px;
              margin-left: -552px;
              top: 50%;
              left: 50%;
          }
  
          #centerdiv {
              display: inline-block;
              width: 1024px;
              height: 576px;
              background-color: #fff;
          }
  
          #lowercenterdiv {
              background-color: #ff00ff;
              width: 1024px;
              height: 50px;
              text-align: center;
              line-height: 50px;
              display: inline-block;
          }
  
          #lowerleftdiv {
              background-color: #00ff00;
              width: 80px;
              height: 50px;
              line-height: 50px;
              position: absolute;
          }
  
          #leftdiv {
              position: absolute;
              background-color: #ff000f;
              width: 80px;
              height: 576px;
              display: inline-block;
              line-height: 576px;
          }
  
          #rightdiv {
              position: absolute;
              background-color: #000fff;
              width: 80px;
              height: 576px;
              display: inline-block;
              line-height: 576px;
              text-align: right;
          }
  
          #lowerrightdiv {
              position: absolute;
              background-color: #fff000;
              width: 80px;
              height: 50px;
              text-align: right;
              display: inline-block;
              line-height: 50px;
          }
  
          .arrowimg img {
              vertical-align: middle;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="containerdiv"&gt;
          &lt;div id="leftdiv"&gt;&lt;img class="arrowimg" src="leftarrow.png"&gt;&lt;/div&gt;
          &lt;div id="centerdiv"&gt;
  
          &lt;/div&gt;
          &lt;div id="rightdiv"&gt;&lt;img class="arrowimg" src="rightarrow.png"&gt;&lt;/div&gt;
          &lt;div id="lowerleftdiv"&gt;?&lt;/div&gt;
          &lt;div id="lowercenterdiv"&gt;?&lt;/div&gt;
          &lt;div id="lowerrightdiv"&gt;?&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><img src="https://i.stack.imgur.com/tHffO.png" alt="enter image description here" /></p>