Canvas makes height of parent DIV grow, why?

Question

With this code:

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

The DIV container is layout to have 504px in Chrome 49.0.2623.112 and 504.14px in IE 11.0.9600.18314

Why the container even with padding, margin and border set to zero grow beyond its content size?

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

Possible duplicate of [Image inside div has extra space below the image](http://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image) — jeffjenx, Jun 01 '16 at 22:06

score 3 · Accepted Answer · answered Jun 01 '16 at 22:01

3

By default, a canvas element is an inline element, just like letters inside of a block of text. The space you are seeing is there to accommodate the descenders of characters like j, p, q, etc.

If you want to fix this problem, then add this to your canvas:

canvas { vertical-align: middle; }

answered Jun 01 '16 at 22:01

jeffjenx

17,041
6
57
99

Thanks!! I was all time assuming that canvas is block. I will never assume anything in the future – Jairo Andres Velasco Romero Jun 01 '16 at 22:06

Canvas makes height of parent DIV grow, why?

1 Answers1