Getting equal padding above and below text
===

We have a graphic designer who's always complaining to me that text in a colored background isn't properly centered vertically, it's a little closer to the top of the box than the bottom. See my [fiddle][1] for an example.

  [1]: http://jsfiddle.net/barmar/vRbcQ/1/

I know I can specify different padding-top and padding-bottom to adjust for this, but I hate hard-coding numbers, since they won't necessarily be right if the browser uses a different default font for the family. Plus, it's a PITA having to do this for every element that has a box around it.

The problem seems to be that the padding isn't measured from the text itself, but some containing box that I think leaves extra space below the letters for descenders.