title: div's have margins when i set margin to 0 for div, and body
body: <p>Im trying to get a <code>div</code> called <code>touch-container</code> to hold a <code>canvas</code> with 3 div's on top. I'm sizing them using <code>javascript</code> as well.</p>
  
  <p>The problem is that each of the 3 div's have a <code>margin</code> which takes up the rest of the space in the <em>container</em> even though i specifically state 0 <code>margin</code>.</p>
  
  <p>Here is a jsFiddle, if you inspect, you can see the <code>margin</code> <a href="https://jsfiddle.net/xwkgwhf2/" rel="nofollow noreferrer"><strong>Jsfiddle</strong></a></p>
  
  <p><strong>HTML</strong>:</p>
  
  <pre><code>&lt;div id = "touch-container"&gt;
      &lt;div id = "touch-left" class = "touch-control"&gt;&lt;/div&gt;
      &lt;div id = "touch-middle" class = "touch-control"&gt;&lt;/div&gt;
      &lt;div id = "touch-right" class = "touch-control"&gt;&lt;/div&gt;
      &lt;canvas id = "canvas" width = "960" height = "560"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong>:</p>
  
  <pre><code>body {
    margin: 0;
  }
  
  #touch-container{
    width: 964px;
    height: 560px;
    display: inline-block;
    margin: 0;
  }
  
  .touch-control{
    position: relative;
    margin: 0;
  }
  
  #touch-left{
    background-color: red;
  }
  
  #touch-middle{
    background-color: green;
  }
  
  #touch-right{
    background-color: blue;
  }
  </code></pre>
  
  <p><strong>JS</strong>: </p>
  
  <pre><code>var leftTouch = document.getElementById('touch-left');
  var upTouch = document.getElementById('touch-middle');
  var rightTouch = document.getElementById('touch-right');
  
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext("2d");
  
  var width = (canvas.width &gt; canvas.height ? canvas.width : canvas.height);
  var height = (canvas.height &gt; canvas.width ? canvas.width : canvas.height);
  
  leftTouch.style.width = (width/ 4) + 'px';
  leftTouch.style.height = height + 'px';
  
  upTouch.style.width = (width/ 2) + 'px';
  upTouch.style.height = height + 'px';
  
  rightTouch.style.width = (width/ 4) + 'px';
  rightTouch.style.height = height + 'px';
  
  ctx.fillRect(0,0,canvas.width, canvas.height);
  </code></pre>
  
  <p>I've colored them in so it should be a black square on the <strong>bottom</strong>, then from <strong>left</strong> to <strong>right</strong>, a red, green and blue square that takes up <code>25%, 50% 25%</code> of the <em>container</em> respectively so you wont even be able to see the black <code>canvas</code>.</p>