Div包含画布有一个奇怪的底部边距5px [英] Div containing canvas have got a strange bottom margin of 5px

问题描述

我面临一个奇怪的问题。

简而言之：

一个div和设置画布的大小，div自动比画布大5px，而我希望它获得完全相同的大小。

这个问题是一个的中看到完全相同的示例（非常简单）

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

解决方案

您可以通过向canvas元素的CSS添加 display：block 来防止它发生。

ie：

  canvas {
 background-color：khaki; / * demo purpose * / 
 display：block; 
} 
  

I'm facing a strange problem.

in short :

When we put a canvas in a div and set the size of the canvas, the div is automatically 5px bigger than the canvas whereas I expect it to get the exact same size.

this question is a following of this answer so I'll take the same example, the issue has been reproduced in firefox and in google chrome. (didn't try other browsers)

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

result (see the white space in the div) :

You can also see this exact same example (very simple) in this JSfiddle

Why does this happen and how can we prevent it ?

解决方案

You can prevent it from happening by adding display: block to the css for the canvas element.

i.e:

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

这篇关于Div包含画布有一个奇怪的底部边距5px的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！