still have space after margin, padding, border all zero?

Question

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 & pointers.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Spacing Question</title>
<style type="text/css">
    *
    {
        border: 0px;
        margin: 0px;
        padding: 0px;
    }
    canvas
    {
        width: 150px;
        height: 150px;
    }
    body
    {
        background-color: Purple;
        color: Silver;
    }
</style>
<script>
    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);
        }
    }
</script>
</head>
<body onload="draw()">
<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">
</div>
</body>
</html>

Looks like both Firefox and Chrome don't worry too much about the HTML 4.0 in the DOCTYPE and just support the Canvas tag anyway. — Reb.Cabin, May 01 '11 at 18:02
I found this question because I had a different issue with space around a canvas. If you add ` ` to the top, and add something like `
` around your canvases, you may see space below them, inside the div's border. To get rid of this, set `vertical-align:bottom` on the canvas. — Rob N, Feb 07 '12 at 14:38
@RobN, thanks, that solved my problem but instead of `bottom` I needed `top`. — Sebastian, Apr 23 '13 at 00:45

score 15 · Accepted Answer · edited May 23 '17 at 11:45

15

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.

edited May 23 '17 at 11:45

Community

1
1

answered May 01 '11 at 17:09

thirtydot

224,678
48
389
349

1

Looks like I got bitten by the HTML / Javascript beautifier in my IDE! It lays out all the tags on their own lines. My grandma advised me to just stick with Emacs or notepad. She was right! – Reb.Cabin May 01 '11 at 17:58

score 8 · Answer 2 · edited Jun 20 '20 at 09:12

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>

+1 for the first two bullet points. I *really* should have included them in my answer, they're important to understanding the problem. — thirtydot, May 01 '11 at 17:15
I had issue with canvas inside absolutely positioned div. Adding canvas inside div via JS (no spaces at all) caused scrollbars on div to appear. Fix for me was to change display to block. — Swav, Apr 29 '13 at 10:03

score 2 · Answer 3 · answered May 01 '11 at 17:19

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.

score 0 · Answer 4 · answered Apr 09 '13 at 11:49

0

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

answered Apr 09 '13 at 11:49

denicio

562
1
7
22

score 0 · Answer 5 · answered Sep 21 '14 at 22:57

0

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.

answered Sep 21 '14 at 22:57

tolga

2,462
4
31
57

score 0 · Answer 6 · answered Apr 12 '16 at 22:45

Using Adobe Animate (NOT Animate Edge), and I created several different banner ads that were essentially the same but with slightly different messaging for A/B testing. Curiously about half of the ads had about a 20px top padding within the 300x250 canvas container, and the bottom 20px was cropped off within the container. The HTML was identical between ads except for the call to the JS file and shared PNG image, so that really stumped me. I'm not sure "why", but this is what I added to the canvas tag:

canvas id="canvas" height="250" width="300" style="display:block; position:fixed; top:0; height:250; width:300px; overflow:hidden;"

Notice the width and height are declared both with the element properties and inline CSS, and I set it to block, fixed, top.

It will be great if you focus on answering and tell your personal story less. It makes the reader confused. If the comment section is not too full, you can write that story there. — Aminah Nuraini, Apr 12 '16 at 23:09

still have space after margin, padding, border all zero?

6 Answers6

tl;dr Put your canvases on the same line.

Linked