CODEWITHSUNDEEP
htmlcssfirefoxgoogle-chromecanvas
Reb.Cabin
Reb.Cabin

Reputation: 5567

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 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>

Upvotes: 5

Views: 12612

Answers (6)

Warren
Warren

Reputation: 1

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.

Upvotes: 0

tolga
tolga

Reputation: 2800

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.

Upvotes: 0

denicio
denicio

Reputation: 562

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

Upvotes: 0

Pete Wilson
Pete Wilson

Reputation: 8694

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.

Upvotes: 2

thirtydot
thirtydot

Reputation: 228182

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.

Upvotes: 15

sdleihssirhc
sdleihssirhc

Reputation: 42496

  • 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>

Upvotes: 8

Related Questions