Still Have Space After Margin, Padding, Border All Zero?

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 element

Solution 1:

It's the whitespace (in this case, a line break) between your two <canvas>:

..
</canvas>
<canvas id="canvas2" ..

If you change it to this, the gap will be gone:

</canvas><canvas id="canvas2"

Alternatively, you can keep your whitespace, and add float: left to canvas in your CSS. If you choose to float them, you probably want to also add #allYourControls { clear: both } to clear your floats.

Solution 2:

• The canvas element has a display of inline by default.
• HTML collapses all multiple instances of whitespace into a single space.

These two properties combine in your case (and many others) to create a little gap between your elements. You have a line break between your canvases:

<canvas></canvas>
<canvas></canvas>

The browser thinks you're just trying to insert a bunch of spaces in between two inline elements. It thinks you're trying to do something like this:

<p>Best of all for man would be
to never exist, second best
would be to die soon.</p>

So it "collapses" those line breaks into a single space. It's the same reason that the above paragraph, for the most part, would be displayed as a single, normal line of text.

tl;dr Put your canvases on the same line.

As @thirtydot suggests, this is how to get rid of the gap:

<canvas>
    ...
</canvas><canvas>
    ...
</canvas>

Solution 3:

If I understand you right, this is a real good example of one way that unwanted spaces sneak into the rendering. You have:

<canvas id="canvas1" width="150" height="150">
    Fallback content 1.
</canvas>
<canvas id="canvas2" width="150" height="150">
    Fallback content 2. 
</canvas>
<div id="allYourControls">

The newlines in the HTML source show up as horizontal space in the rendered page. If you change it to be something like:

<canvas id="canvas1" width="150" 
            height="150">Fallback 
                         content 
                         1.</canvas><canvas id="canvas2"
     width="150" height="150">Fallback content 2.</canvas><div id="allYourControls">

then there should be no extraneous horizontal space anywhere. The trick to eliminating horizontal space -- to achieve that snug-up effect you want -- is to butt following stuff right up tight against > characters.

Solution 4:

Don't float anything. Just add CSS rule display: block; to the canvas element.

Solution 5:

I also had this problem and solved the issue with:

<canvas style="display: block;" ...

It's been long time but hope this would be helpful for another person.