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?
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; }