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

Question

我面临一个奇怪的问题.

简而言之 :

当我们在div中放置一个画布并设置画布的大小时,div自动比画布大5px,而我希望它得到完全相同的大小.

这个问题是这个答案的后续问题 所以我将采用相同的例子,这个问题已经在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中的空白区域):

你也可以在这个JSfiddle中看到这个完全相同的例子(非常简单)

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

Answer 1

您可以通过添加display: blockcanvas元素的css 来防止它发生.

即:

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