Discussion on: Things I Wish I’d Known About CSS

I have a few tips I want to say around the image thing which can help to understand relation of inline, inline-block and block:

1. Images are like inline-block.
2. inline-blocks are like a single character of text.
3. The "mysterious" space with default images is just the way characters are laid.
4. Images are vertical-align: baseline by default.
5. Instead of display: block on image you can say vertical-align: top.
6. Text is always inline (this is why you need a span wrapper to do cool stuff with characters).

If you study technicalities of fonts you can understand a whole lot better the whole vertical-align stuff and relation to inline and inline-block.