Div contenente canvas ha uno strano margine inferiore di 5px

Question

Sto affrontando uno strano problema.

in breve:

Quando abbiamo messo una tela in un div e impostare la dimensione della tela, il div è automaticamente 5px più grande della tela, mentre mi aspetto di ottenere la stessa dimensione esatta.

questa domanda è un seguito di this answer così mi prendo lo stesso esempio, il problema è stato riprodotto in Firefox e in Google Chrome. (non provate altri browser)

<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 */ 
} 

risultato (vedere lo spazio bianco nel div):

Si può anche vedere questo esatto stesso esempio (molto semplice) in this JSfiddle

Perché ciò accade e come possiamo prevenirlo?

Answer 1

È possibile evitare che ciò accada aggiungendo display: block al css per l'elemento canvas.

cioè:

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