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

canvas, html

Solution

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

Problem

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 ?

Original source