画布使父DIV的高度增长，为什么？

Question

使用此代码：

<!-- gets: height: 504px, why? -->
<div style="background-color:black"><canvas width="500" height="500"></canvas></div>

DIV容器布局在Chrome 49.0.2623.112中为504px，在IE 11.0.9600.18314中为504.14px

为什么即使填充，边距和边框设置为零的容器也会超出其内容大小？

https://jsfiddle.net/4gqk5dmw/1/

Answer 1

默认情况下，canvas元素是内联元素，就像文本块内的字母一样。您看到的空间可以容纳j，p，q等字符的下降部分。

如果要解决此问题，请将其添加到画布中：

canvas { vertical-align: middle; }