Div containing canvas have got a strange bottom margin of 5px

Question

I'm facing a strange problem.

in short :

When we put a canvas in a div and set the size of the canvas, the div is automatically 5px bigger than the canvas whereas I expect it to get the exact same size.

this question is a following of this answer so I'll take the same example, the issue has been reproduced in firefox and in google chrome. (didn't try other browsers)

<div>     <canvas height="300px" width="200px"></canvas> </div> 

CSS :

div {     border: 2px solid blue; /* demo purposes */     display: inline-block; } canvas {     background-color: khaki; /* demo purposes */ } 

result (see the white space in the div) :

You can also see this exact same example (very simple) in this JSfiddle

Why does this happen and how can we prevent it ?

Answer 1

You can prevent it from happening by adding display: block to the css for the canvas element.

i.e:

canvas {     background-color: khaki; /* demo purposes */     display: block; }