Divのキャンバスに5pxという奇妙なボトムマージンがあります

Question

私は奇妙な問題に直面しています。要するに

：私はそれがまったく同じサイズを得ることを期待に対し、我々はdivの中にキャンバスを入れて、キャンバスのサイズを設定

、divがキャンバスより自動的に5pxの大きいです。

この質問は次のとおりですthis answer 私は同じ例を取るので、問題はFirefoxとGoogle Chromeで再現されています。 （他のブラウザを試していない）

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

結果（div要素内の空白を参照してください）：

ます。また、これを見ることができます全く同じ例（非常に簡単）this JSfiddle

なぜこれが起こり、どうすればそれを防ぐことができますか？

Answer 1

キャンバス要素のCSSにdisplay: blockを追加することで、そのようなことを防ぐことができます。

すなわち：

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