Я озадачен поведением следующего CSS, также проиллюстрированного в этой скрипте.
<style type="text/css">
p {
font-size: 14px;
}
.percentage {
line-height: 150%;
}
.em-and-a-half {
line-height: 1.5em;
}
.decimal {
line-height: 1.5;
}
.smaller {
font-size:50%;
}
.caption {
font-weight: bolder;
font-size: 80%;
}
</style>
<p class="caption">default line spacing</p>
<p>This tutorial provides a brief introduction to the
programming <span class="">language</span> by using one of its picture-drawing
libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.</p>
<p>This tutorial provides a brief introduction to the
programming <span class="smaller">language</span> by using one of its picture-drawing
libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.</p>
<p class="caption">line-height: 150%</p>
<p class="percentage">This tutorial provides a brief introduction to the
programming <span class="">language</span> by using one of its picture-drawing
libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.</p>
<p class="percentage">This tutorial provides a brief introduction to the
programming <span class="smaller">language</span> by using one of its picture-drawing
libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.</p>
<p class="caption">line-height: 1.5em</p>
<p class="em-and-a-half">This tutorial provides a brief introduction to the
programming <span class="">language</span> by using one of its picture-drawing
libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.</p>
<p class="em-and-a-half">This tutorial provides a brief introduction to the
programming <span class="smaller">language</span> by using one of its picture-drawing
libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.</p>
<p class="caption">line-height: 1.5</p>
<p class="decimal">This tutorial provides a brief introduction to the
programming <span class="">language</span> by using one of its picture-drawing
libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.</p>
<p class="decimal">This tutorial provides a brief introduction to the
programming <span class="smaller">language</span> by using one of its picture-drawing
libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.</p>
Первые два абзаца имеют интервал между строками по умолчанию. Во втором абзаце есть одно слово, которое меньше. Но это не влияет на межстрочный интервал в этом параграфе. Не то, чтобы это было, но потом -
Следующие два абзаца имеют line-height: 150%. Опять же, второй абзац имеет одно слово, которое меньше. Но на этот раз, по непонятным причинам, меньший шрифт создает дополнительное пространство между первыми двумя строками (по крайней мере, в Safari, Chrome, Firefox и Explorer). Это оригинальная проблема в моем CSS, которую я пытался исправить. (Я предполагаю, что это как-то связано с тем, что браузер сжимает слово, а затем сдвигает его вниз по вертикали, чтобы перестроить базовые линии.)
Следующие два абзаца имеют line-height: 1.5em. Я понимаю, что 1.5em совпадает с 150%. И действительно, поведение одно и то же: дополнительное пространство между двумя первыми параграфами второго абзаца.
Но здесь, где он становится странным: следующие два абзаца имеют line-height: 1.5 - ни одна единица не указана. На этот раз проблема с дополнительным пространством исчезает.
В целом, CSS, похоже, дает согласованные результаты межстрочного интервала, когда высоты строк родительского и дочернего элементов различаются (через наследование безраздельного значения), но несогласованные результаты, когда высоты строк родителя и дочернего объекта одинаковы,
Таким образом, мои вопросы:
-
Я знаю там намеренную семантическую разницу в спецификации CSS между
1.5и150%или ее синонимом1.5em. (А именно: единичное значение передается дочернему элементу, а его высота строки вычисляется с использованием размера дочернего шрифта, тогда как процентное значение или значение em приведет к вычислению высоты строки для родителя, а затем это расчетное значение передается ребенок.) Но как это объясняет разницу в поведении, наблюдаемую здесь? Откуда появляется дополнительное пространство? Если это следствие некоторого правила позиционирования CSS, то что это за правило? -
Или, если эти примеры должны отображаться одинаково, то какой из них выполняется неправильно? (Примечание по Q2: тот факт, что quirk визуализации происходит одинаково в разных браузерах, настоятельно указывает на то, что ни один из них не реализован неправильно, что вернет вас к вопросу (1).)
-
В практическом плане есть недостаток в переключении на безразмерные измерения, такие как(Ответ: нет)1.5дляline-height?