Why img element has space below?


If you notice closely enough, you will know that an img tag always* has space below it. Only in cases where you may be using a CSS reset or other frameworks, You may not encounter this issue. If you need to check it, try including an image inside a div with border and you will see height of DIV is larger then img.

Reason for this is by default img is rendered as inline element, just like characters
which make vertical alignment of img is same as for a,b,c. space below is actually the space for descenders that you may find in letters like p,q.

Easiest solution is to render your images as block elements.

Tags: , ,