title: still have space after margin, padding, border all zero?
body: <p>I have set margin, padding, and border to zero, yet there is still space around my canvases and divs in both Firefox and Chrome. Clearly, I do not understand how to snug up elements in HTML, and would be grateful for advice &amp; pointers.</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Spacing Question&lt;/title&gt;
  &lt;style type="text/css"&gt;
      *
      {
          border: 0px;
          margin: 0px;
          padding: 0px;
      }
      canvas
      {
          width: 150px;
          height: 150px;
      }
      body
      {
          background-color: Purple;
          color: Silver;
      }
  &lt;/style&gt;
  &lt;script&gt;
      function draw() {
          var canvas = document.getElementById('canvas1');
          if (canvas.getContext) {
              var ctx = canvas.getContext('2d');
              ctx.fillStyle = "rgb(200, 0, 0)";
              ctx.fillRect(0, 0, 150, 150);
          }
          canvas = document.getElementById('canvas2');
          if (canvas.getContext) {
              var ctx = canvas.getContext('2d');
              ctx.fillStyle = "rgb(0, 200, 0)";
              ctx.fillRect(0, 0, 150, 150);
          }
      }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="draw()"&gt;
  &lt;canvas id="canvas1" width="150" height="150"&gt;
      Fallback content 1.
  &lt;/canvas&gt;
  &lt;canvas id="canvas2" width="150" height="150"&gt;
      Fallback content 2. 
  &lt;/canvas&gt;
  &lt;div id="allYourControls"&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>