包含画布的Div底边距为5px

Question

我面临一个奇怪的问题。

简而言之 ：

当我们将画布放在div中并设置画布的大小时，div自动比画布大5px，而我希望它获得完全相同的大小。

这个问题是该答案的后续内容，因此我将采用相同的示例，该问题已在Firefox和谷歌浏览器中重现。 （未尝试其他浏览器）

<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中的空白）：

您还可以在此JSfiddle中看到这个完全相同的示例（非常简单）

为什么会发生这种情况，我们如何预防呢？

Answer 1

您可以通过在画布元素的css中添加display: block来防止发生这种情况。

即：

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