html - Canvas makes height of parent DIV grow, why? -


with code:

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

the div container layout have 504px in chrome 49.0.2623.112 , 504.14px in ie 11.0.9600.18314

why container padding, margin , border set 0 grow beyond content size?

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

by default, canvas element inline element, letters inside of block of text. space seeing there accommodate descenders of characters j, p, q, etc.

if want fix problem, add canvas:

canvas { vertical-align: middle; } 

Popular posts from this blog

php - How should I create my API for mobile applications (Needs Authentication) -

5 Reasons to Blog Anonymously (and 5 Reasons Not To)

Google AdWords and AdSense - A Dynamic Small Business Marketing Duo