Geek Answers Handbook

Still have a space after the field, fill, border is all zero?

I set margin, padding and border to zero, but there is still space around my canvases and divs in Firefox and Chrome. Clearly, I don’t understand how to pin elements in HTML, and would be grateful for the tips and 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>
+4
source share
6 answers

This is a space (in this case a line break) between two <canvas> :

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

If you change it to this, the space will disappear:

 </canvas><canvas id="canvas2"

Alternatively, you can keep spaces 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 .

+15
source
  • By default, the canvas element has an inline display.
  • HTML collapses all multiple instances of spaces into one space.

These two properties combine in your case (and many others) to create a small 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 between two inline elements. He thinks you are 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>

Thus, he "collapses" these line breaks into one space. This is for the same reason that the above paragraph, for the most part, will appear as a single normal line of text.

tl; dr Put your canvases on one line.

As @thirtydot shows, here's how to get rid of the gap:

 <canvas> ... </canvas><canvas> ... </canvas>
+8
source

If I understand you correctly, this is a really good example of how unwanted spaces get into 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">

New lines in the HTML source are displayed as horizontal space on the displayed page. If you change it to 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">

there should be no extraneous horizontal space anywhere. The trick for eliminating horizontal space - to achieve the desired snap effect - is sticking the following elements up the body against> characters.

+2
source

Do not swim anything. Just add a CSS rule display: block; to the canvas element.

0
source

I also had this problem and solved the problem:

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

It was a long time ago, but I hope that it will be useful for another person.

0
source

Using Adobe Animate (NOT Animate Edge), and I created several different banners that were essentially the same, but with slightly different messages for testing A / B. Interestingly, about half of the advertisements had about 20px the top in a 300x250 container, and the bottom 20px was trimmed inside the container. The HTML was identical between the declarations, with the exception of calling the JS file and the general PNG image, so it really slowed me down. 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;"

Please note that the width and height are declared both with the properties of the element and with inline CSS, and I set it to lock, fixed, top.

0
source

More articles:


All Articles