Почему уменьшение размера шрифта элемента SPAN внутри абзаца увеличивает высоту абзаца?

Я показываю две панели DIV с кодом, приведенным ниже. Единственная разница между двумя панелями заключается в том, что элемент SPAN в первом элементе DIV имеет примененный к нему стиль font-size: 14px, а второй элемент DIV не имеет этого стиля. Как в Firefox, так и в Chrome первая панель имеет большую высоту, чем вторая. Вот демонстрационный URL-адрес: http://jsfiddle.net/UWX2u/

Ниже следует копия кода:

    

        
Foo Bar
    

    

        
Foo Bar
    

С помощью Firebug я мог видеть, что вычисленная высота элемента P в первом DIV равна 44,1833 пикселя, а у элемента P во втором DIV — 38 пикселов. Почему возникает эта разница?

Если я удалю свойство line-height: 38pxиз CSS, оба элемента DIV будут иметь одинаковую высоту. Вот страница, демонстрирующая это: http://jsfiddle.net/FJUDn/