Extra 4px at the bottom of html <img>
You may or may not have noticed that when you fix the height of a <img> element, the parent by default has 4px more height than the <img> tag, here is an example:
Is this a bug? Of course it isn’t , it is default behaviour.
The <img> element is an inline element by default, just like a span. Inline elements are vertically aligned with other inline elements on the same line in some default manner. In layman terms, by default the bottom of <img>is aligned to the baseline of the container. Baseline is where letters like ‘a’, ‘b’, ‘c’, ‘d’ sit on, which means for letters like ‘g’ , ‘j’ , ‘y’ , some part of them sits below this baseline (by the way, these parts are called ‘descenders’ ). This is the 4px gap you see by default, because the image is rendered on the baseline , leaving space for the descenders.
How to fix it:
Since we understand that this issue is due to the vertical alignment of the image with respect to other elements on the same line, we can easily correct it in following ways:
change the vertical-align property (which is only applicable for inline elements)
change the display property to make <img> a block element instead of inline.
There are some other hacks which include setting the line-height of parent to 0, setting the font-size of parent to 0.
References: