包含画布的Div有5px的奇怪底部边距

Question

我面临一个奇怪的问题。

简而言之：

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

这个问题是this answer的关注 所以我将采用相同的例子，这个问题已在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中的空格）：

您还可以在this JSfiddle

中看到完全相同的示例（非常简单）

为什么会发生这种情况？我们如何防止它？

Answer 1

您可以通过向canvas元素的css添加display: block来阻止它发生。

即：

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