The inline box model is a very complicated thing and a thing of beauty (not).:)
Line-height sets the minmum height of the line so it can change depending on its content. You set the line-height to 21px which means that the half leading that is distributed between top and bottom of the line is 21px - 14(font-size) = 7px to be equally distributed between top and bottom = 3.5px each side (ignoring the fact that there is no such thing as half a pixel so there will be some differences in the way that this is distributed between browsers anyway.
Then you have another inline box that has font-size of only 10px which means that 11px will be distributed over the top and bottom = 5.5px each side. However the smaller text sits on the baseline and when the 5.5px half leading is added to the bottom it pushes the line height higher than it was.
You can test this by changing the vertical alignment of the inner element to top and the line reverts to 21px.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<p>This is some ext <span>in a span</span></p>
(Note that "top" is referring to the text next to it and not the top of the line. This just moves it up so that its half leading doesn't go outside the existing line-box.)
Therefore when you have inline boxes of varying font-size you should reduce the line height on the smaller font sizes to avoid this happening.
Or as Eric Meyer suggests unitless line-heights would achieve this more simply.
[B] line-height: 1.5;[/B]
The child elements inherits the scaling factor (because of the unitless line-height) and not the computed height as per other methods and thus keeps the text within the boundaries of the line.
Easy once you know how isn't it
I've included an attachment as it so much easier to see in a drawing.