Firefox not respecting line-height

The problem may appear in other browsers too, I haven't checked yet.

Sorry but this will take some amount of work on your part. Please bear with me.

• Open Firefox. You need the Firebug extension or something that will let you run a single JS command.

• Go here. Sorry for all the anime.

• Open the Firebug console and run the following command:

CSSdev.enable_tiles()

• You're now looking at the baseline grid. Each square is 24x24 pixels. The line height throughout the site is 24px, with no exceptions. Images, margins, the size of everything is a multiple of 24px.

• Scroll down until you can see the "Fluffy tag cloud" in the sidebar. Notice how anything under it is misplaced; it's a little too low. If you navigate in the Firebug DOM tree to that part of the layout and hover with the mouse cursor on the <p> element, you'll be able to see that the tag cloud's height is a little too big.

To be more clear: the problem is that the height of the <p> element that wraps all the <span> elements of the tag cloud is not a multiple of 24px; indeed, it's just a few pixels too big.

This is strange, because the <p> contains only text and its line height is 24px, so its height should be 24px multiplied by the number 开发者_JAVA技巧of lines of text inside it, regardless of the font size of anything inside it. This is how I understand it anyway.

Given that:

• The tag cloud does inherit the line-height: 24px rule;
• The font size of any span inside the cloud is 20px or less;
• The only way to fix the problem seems to be to give to all the spans the same font-size (e.g. giving everything a 16px font-size works)

Is there any kind of fix or fugly hack I can use to have different font sizes and a line height of 24px?

I don't know why Kobi deleted his answer but it actually led to a fix for my problem. A solution is to convert it to a list, UL and LIs inside it, float the LIs left and set a height for them of 24px and a small margin to keep them apart horizontally.

@Kobi: please re-add your answer so I can accept it

Since I have now fixed the problem, the steps described above won't work anymore.

This is weird, and I didn't check into that, but it looks like setting this does the trick:

.rank-1 {
   line-height: 1;
}

Again, I'm just playing around, but it seems to align the page the way you want.

Another option is to have the tags float:left and have a fixed height of 24px.