Невозможно изменить высоту строки элемента внутри заголовка

Question

У меня есть заголовок (h1), содержащий small. Номер small имеет номер font-size: 60%. Все отлично выглядит, пока small слишком длинный, чтобы поместиться на одну линию и разрывы строк.

Что происходит тогда, что высота линии small равна way слишком высокая. Изменение его на 1 или < 1 не имеет значения. Даже изменение его на точное значение px ничего не делает.

Как я могу уменьшить высоту линии моего h1 small правильно?

http://jsfiddle.net/2SDLq/

<h1><small>Here's a long small text preceding the normal sized text in this heading</small><br>Normal Size</h1> 

    h1 { 
    font: bold 30px/1.2 "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif; 
    font-size: 3rem; 
} 

h1 small { 
    font-size: 60%; 
    font-weight: normal; 
    line-height: 10px; /* Does nothing */ 
} 

Answer 1

Вам нужно добавить display:inline-block к малым. Элементы, которые являются встроенными, не занимают линии.

Обновленный jsfiddle http://jsfiddle.net/2SDLq/14/

Answer 2

С:

• заголовки с помощью блочных элементов по умолчанию
• значение встроенный блок не поддерживается в LTE IE7 (хотя эти версии, к счастью, больше не обычно не используется)
• Вы размещаете элемент small в отдельной строке

вы можете установить display свойство block:

h1 small { 
    display: block; 
    font-size: 60%; 
    font-weight: normal; 
    line-height: 10px; 
} 

Кроме того, чтобы быть в состоянии установить свойство высоту строки для small, вы можете также избавиться от ненужных
тега и установить зазор между текстом заголовка и маленький с отступом и/или маркой