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

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

Ниже приведена копия кода:

<!DOCTYPE html>
<html>
<head>
<title>Margin border</title>
<style type="text/css">
body {
    line-height: 38px;
    font-size: 32px;
}

#panel1 {
    background: #00a000;
    float: left;
}

#panel2 {
    background: orange;
    float: left;
}

#panel1 p span {
    font-size: 14px;
}
</style>
</head>
<body>

    <div id="panel1">
        <p>Foo <span>Bar</span></p>
    </div>

    <div id="panel2">
        <p>Foo <span>Bar</span></p>
    </div>

</body>
</html>

С Firebug я мог видеть, что вычисленная высота элемента P в первом DIV равна 44.1833px, а для элемента P во втором DIV - 38px. Почему это происходит?

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

Ответ 1

Что касается "Почему" происходит

Согласно W3C (выделено жирным шрифтом),

'line-height' определяет высоту строк минимальная. элемент. Минимальная высота состоит из минимальной высоты выше. базовая линия и минимальная глубина ниже it... Высота и глубина шрифта выше и ниже базовой линии считаются метриками, которые содержатся в шрифте.

Так что это говорит мне, что

1) line-height может при необходимости быть выше (это минимально) и

2) ваше сокращение шрифта, по-видимому, изменит, как шрифт применяет минимум выше и ниже базовой линии span для line-height: 38px. По-видимому, меньший размер шрифта перераспределяет больше интервалов ниже базовой линии меньшего шрифта, нажимая тег p выше. Это подтверждается тем, что если вы добавите к span a vertical-align: top как я здесь,, то базовая линия сдвинется для меньшего шрифта и не изменит размер происходит в теге p.

Ответ 2

Не уверен, почему это влияет на него, но если вы добавите атрибут line-height в span, как у меня в этом.

http://jsfiddle.net/GQhZR/

.. он решает проблему.

Поэтому высота строки, прежде чем исправляться с помощью css, больше, чем высота родительской панели.

css edit:

#panel1 p span {
    font-size: 12px;
    line-height: 12px; 
}