Where there is a Will

One of the things that used to annoy me about working with CSS, is that I had a mental block about margin and padding. I could never recall which was which, because the two terms mean pretty much the same thing; an arbitrary space around text. Frankly I think the creators of CSS should have used have called them inner-margin and outer-margin, or inner-padding and outer-padding. I’m sure there is a good reason for using the terms margin and padding (I’m guessing its from typesetting nomenclature), but to me they feel arbitrary and may have well have been called bob and jane.

Fortunately I came up with a mnemonic that made it click. Just remember the phrase ‘padded cell’. In a padded cell, the padding goes on the inside. So there you have it, you’ll never again forget that the box model is text -> padding -> border -> margin.

I like the idea of tag-clouds and tags in general, but I had problems making them look good in becontrary.com. I experimented with changing the relative size and blending colors, as well as with the huge number of visual tweaks you can do with CSS, but the amorphous blob of words just didn’t seem to fit with the nice neat columns I had. Until, that is, I sorted the tags by popularity, which made it a lot neater and enhanced the effect of blending the font size / color. I don’t know why it didn’t occur to me before. I don’t see many sites doing this, most tag clouds are sorted alphabetically.

The image below shows a tag-cloud sorted by popularity (left) and just alphabetically (right). Which one do you think looks better?

(Click for a larger image.)

Update: A few people have commented that without alphabetical order it is difficult to pick out a tag you are looking for. Personally I have never used a tag cloud like that, its usually just a starting off point to explore the site. If I wanted something specific I would use the search function. Even if the tag-cloud is used to scan for specific tags, it becomes redundant if you have so many tags that you can only show a subset, which is the case for becontrary.com. So I chose form over function, consequences be damned!