Remove Space Under Canvas Element?

Asked 22/1, 2017 at 15:31 Answered 23/1, 2017 at 4:8

I wrote the following code

 canvas{ width: 1000pt;height: 100pt; margin: 0px;   }
.bluecolor{background-color : skyblue;}
.orangecolor{  background-color : darkblue;}
.indianred{background-color : 	#CD5C5C ;}

 
<html>
<body>
<canvas id="canvas1" class = "orangecolor" > </canvas>
<canvas id="canvas2" class = "bluecolor" > </canvas>
<canvas id="canvas3" class = "indianred" ></canvas>
</body>
</html>

I want to remove the spacing between the canvas elements , and want it to have no space between , them how to achieve it ?

And also why is there any spacing , when I have explicitly made margin to be zero ?

Maybe I am missing a crucial point , I am a beginner in HTML, CSS and JavaScript , and if I have not properly framed my question please mention it in comment below , I will happily do so.

Tallman answered 22/1, 2017 at 15:31 Comment(0)

canvas {
  display: block;
}

this should do the trick.

ok the explaination :

see canvas is inline, so lets consider it like text or for simplicity a character.. now consider character 'w' and 'g' .. now note that 'g' descends lower in line than 'w' , so when character 'g' is rendered there is some space is below the baseline , so when 'wg' is render there is empty space below character 'w' ..

that is the space you see below your inline element canvas.

lets just get out of inline thing and give it a display: block

Dewain answered 22/1, 2017 at 15:34 Comment(3)

@Stranger - Because a canvas element is a replaced element and by default an inline element, so the bottom of the element is its baseline. Also on the same line is a strut - a zero width pseudo-character aligned to the same baseline but part of which hangs down below that baseline. The top of the line below must be below the bottom of that line including the bit of the strut hanging below the baseline. By making the canvas a block element, there is no line and no strut, so no need to allow extra space for it. – Supporter 22/1, 2017 at 15:47

It would be better if you put the explanation to the answer itself rather than add it in comments. – Compagnie 22/1, 2017 at 16:25

@Supporter you have link to specs regarding this ? basically that zero width pseudo character you said ? – Dewain 22/1, 2017 at 16:44

This space is created by line break between </canvas> and <canvas> .

Try to add font-size:0 for parent element of canvas elements,

body{font-size:0}

or remove line break between end tag and begin tag of canvas element like this.

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

Sebastiansebastiano answered 23/1, 2017 at 4:8 Comment(1)

I have tried it , it is not, please try it yourself. – Tallman 24/1, 2017 at 15:56

Recommended topics

Hot tags