html - Canvas 使父 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 元素是内联元素，就像文本 block 中的字母一样。您看到的空间用于容纳字符的后代，例如 j、p、q 等

如果您想解决此问题，请将其添加到您的 Canvas 中:

canvas { vertical-align: middle; }