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