Q:

How can I vertically align text within a span element, or make the span the same size as the text?

This seems like a pretty basic question, but I can't find the answer anywhere.  In the image below, the word "Schedule" is in a span within a span.  The blue box is not part of the CSS, it's the Firebug highlight rectangle showing the dimensions of the outer span.

Here's the HTML:
<span class="caption">
  <span class="green">Schedule</span>
</span>

I also made a jsFiddle illustrating the issue.
There is no padding or margin on either span, just some sizing and color information.  The font size is 48px, but the span height is computed to be 65px, and the text is vertically centered in this span, causing the top of the text not to line up with the clock icon, which is in a separate HTML element.
The question is: why is the span taller than the text it contains, and how can I either (1) make them the same size, or (2) align the text at the top of the span.  I want to emphasize that I am not setting the span height this way; Firefox is doing this, and there are no padding or margins involved.

A:

Controlling most of the dimensions for inline elements will have no effect and is generally not supported (it would be directly against the intent of being inline).  You must modify the display to be either inline-block or block.  

