I have a simple page with a single div. Inside that div I have an image with dimensions [h:58px, w:173px].
<body>
<div id="main_header">
<img src="logo.gif" style="padding: 0; margin: 0;">
</div>
</body>
It is not wrapped in any other tags. However, Chrome calculates the height of the container div as 63px. There is no associated css with the #main_header. html and body both have margin and padding set to 0.
Can anyone explain why the div’s height is coming out to 63 and not 58?
It’s because of the parent’s
line-height. Either set theline-height(orfont-size) of the parent to zero, or set the image todisplay: block.