Common CSS Forgetables Part 2 – Thumbnails

The img is inline HTML element. That’s why we can place it inside every other element, notably the span and a. When an image is nested inside a link (for example a thumbnail), it will ‘pick-up’ clickability of the a element. But what’s with the actual space occupied by those two? Why we sometimes can’t achieve desired effect?

General setup

a { border: 0; }
a:hover { background: #f30; }
a img { border: 1px solid #ccc; padding: 4px; background: transparent; }

Here, we reset ugly blue default link border, and declare rules for :hover pseudo-class. We also add a simple frame around images (this way we can track changes in the background).

All combinations can be seen on the test page.

Link inline, image inline

a.thumbnail { display: inline; }
a.thumbnail img { display: inline; }

The above is redundant piece of code, as those are default values, which don’t have to be specified in the CSS additionally.

In this first case image breaks out from the link, but doesn’t expands it. The link is wide as much as the image is, but its’ height depends on the parent element font sizing, i.e. if the font size of the parent element is 10px, then link would be 10px high.

Link block, image inline

a.thumbnail { display: block; }
a.thumbnail img { display: inline; }

This one seems fine, but we have to be aware that the blocked link will expand to a full width available, unless we specify its’ width.

Link inline, image block

a.thumbnail { display: inline; }
a.thumbnail img { display: block; }

Our third example will make a element completely invisible, i.e. we wouldn’t be able to apply any styling to it (I’m talking mostly about backgrounds here).

Link block, image block

a.thumbnail { display: block; }
a.thumbnail img { display: block; }

The fourth combination is like the second one, providing us with the desired functionality. Drawbacks are also the same, i.e. width should be specified.

If the link is floated?

If we float links (the usual way of dealing with an image galleries), they are by inheritance displayed as block elements (i.e. if some element is set with a float: left; /* or right */, it will automatically behave like it’s also set to display: block;, even though it really isn’t).