Each class contributes an extra 4 to 5 pixels to the height of the .inner element. Tested in FF and Safari.
I'm running into the same issue. Seems to be related to the display: inline-block on these classes.
That's exactly what's happening here. Elements with display: inline-block inherit line-height. By default, inline-block elements sit on the baseline. The white space that you're seeing is for letters that have descenders (the part of the letter that goes below the baseline, like 'g'). I'm confused about why these have the inline-block declaration in the first place since they are given width: 100%. Maybe @stubbornella can clarify why these aren't just block elements?