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

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

11 голосов
/ 23 марта 2012

Я отображаю две панели 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.1833.px, а у элемента P во втором DIV - 38 пикселей.Почему возникает эта разница?

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

Ответы [ 2 ]

11 голосов
/ 23 марта 2012

Что касается «почему», то это происходит

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

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

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

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

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

2 голосов
/ 23 марта 2012

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

http://jsfiddle.net/GQhZR/

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

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

css edit: 

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