Visualising links
By their nature, links — and, especially, images within them — can display quite unexpectedly.
In the following examples, links have padding, and are bordered, in order to demonstrate the box each one generates. All linked images are marked up in the following manner:
<a href="#"><img src="escribano.jpg"></a>
Observed behaviour is, as far as I can determine, consistent with the CSS spec. Comments are relevant to the rendering applied by Firefox 3.5.5; other browsers (especially IE < 8) may display different results.
Here’s a basic, unlinked image for reference.
This image is linked in the ‘simplest’ way; no styling is present, other than the defaults applied by the browser (and, of course, the border around the hyperlink). Note that, although the image is linked, the link’s padding only applies to the smaller, inline box that it creates.
This link has a display value of ‘block’ to ensure it generates a block box. Note that the image, however, remains inline, as evidenced by the gap below it.
Now the display block is switched to the image. This is possibly the weirdest result of all (in Firefox, at least) in that the inline link contains a block-level image, which is displayed immediately below it.
