Understanding the img Tag

HTML & CSS
1

Hi,

I currently styling my site and I noticed that if I apply line-height to my page-wrap it affects any image used in my page, I start seeing a gap between the images and any other elements below or above the image.

Should line-height affect images?

Is the img tag consider text?

Thanks a lot!

2

https://developer.mozilla.org/en/images,_tables,_and_mysterious_gaps

3

Thanks a lot for your help.

Found the problem, I was using the XHTML 1.0 Strict DOCTYPE and I changed it to XHTML 1.0 Transitional and it did the trick.

I could also make my images block elements and this would work with the Strict DOCTYPE but I’ll rather use Transitional.

Thanks a lot!

4

well, now you have a transitional doc. That’s no good, especially at this day and age.
try giving your img{vertical-align:bottom;} instead

5

Thank you for your reply neighbor!

So, would you recumbent using Strict instead and fix any issue?

Can you briefly explain the difference between these two?

Changed, doctype back to Strict, added img{vertical-align:bottom;} and it seems to be working.

Thanks a lot!

6

Transitional is basically an admission that your code is no good… an attempt at modern markup but with lots of outdated code.

Definitely use Strict and fix the problems instead of pasting over them. It will stand you in good stead in future. The real fix for the problem was vertical-align:bottom, as dresden_phoenix said.

7

Thank you all for your replies. I will start using Strict.

Oh, sorry about this

So, would you recumbent using Strict instead and fix any issue?

it should be

So, would you recommend using Strict instead and fix any issues?

Thanks a lot!

8

Should line-height affect images?

Is the img tag consider text?

Yes, line-height should affect images (if they haven’t been set to some kind of block context). They are not considered text, but inlines (and text is also inline).

I personally believe Mozilla browsers are correct when you have an image not appear: the dimensions of the image are gone (inlines can’t have set dimensions, but the actual file the img tag calls does).

9

Thank you for your reply!