There's one big issue when displaying images inline like smileys is to position them at the right height.
Usually what you do is try to use
vertical-align and test all the possibilities. Then you are frustrated because you can't find the one that is pixel perfect the height you want!
What I used to do was to find the nearest
vertical-align and then use
position: relative; top: -1px; to slightly adjust the vertical position. This works very well, it doesn't change the line-height and sets the image at the exact position you want!
Until I re-read the documentation for
vertical-align ... It appears that we can specify a number instead of the pre-sets! You can just do
vertical-align: -2px; and it works. It is relative to the baseline pre-set.