包含画布的 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;
}