html, css - weird invisible margin below pictures
This is actually not that uncommon. It's because the image is an inline elements so there is some space between the bottom of the image, which is placed on the base line of the text, and the bottom of the text line.
The easiest solution to this is to simply use display:block;
to turn the image into a block element. Floating the image using float:left;
or float:right;
also works as that also turns it into a block element.
Adjusting properties like the vertical-align
, font-size
and line-height
may also affect the distance, but it's not as robust as it doesn't really remove the effect. It might still appear in some circumstances.
Related questions:
Unwanted spacing below images in XHTML 1.0 Strict
Why have my images got extra spacing?
IE image spacing issue
sorry to answer to this question 3 year later, but this page is in first google page and i feel responsibility ..... answer: only add "vertical-align: top;" to img tag inside a tag.