Строка-высота, влияющая на интервал над первой строкой и после последней строки

У меня есть текст в боковом заголовке с несколькими строками. Хотите увеличить расстояние между двумя линиями, чтобы установить высоту линии. Когда я это делаю, он не только увеличивает пространство между двумя линиями, но и увеличивает расстояние выше первой строки (и, возможно, ниже второй). Как увеличить расстояние между двумя линиями, без увеличения выше и ниже.

Я знаю, что это поведение Line-height. но просто любопытно, есть ли для этого хорошее решение.

Это просто пример того, что я прошу.

Jsfiddle: http://jsfiddle.net/jitendravyas/V3eWV/

Ответ 1

Вы можете использовать для этого отрицательные поля, хотя есть что-то, о чем нужно помнить:

line-height - забавная вещь. Согласно CSS2.1 в нем не указывается высота линии, а минимальная высота строковых блоков:

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

Строка строки определена в 9.4.2 Внутренние контексты форматирования:

В контексте форматирования форматирования поля выкладываются горизонтально, один за другим, начиная с верхней части содержащего блока. Горизонтальные поля, границы и отступы соблюдаются между этими ящиками. Ящики могут быть выровнены по вертикали по-разному: их днища или вершины могут быть выровнены или исходные тексты внутри них могут быть выровнены. Прямоугольная область, содержащая прямоугольники, которые образуют линию, называется строкой .

Это не изменяется в CSS3 очень много, по крайней мере, если вы не измените line-stacking. Однако не существует свойства, которое напрямую нацелено на вашу проблему: вы не можете изменить line-height в ::first-line, он всегда будет применяться.

Тем не менее, используйте отрицательные поля на данный момент. Еще лучше, оберните ваши элементы в общий контейнер. Используя :first-child и :last-child, вы можете добавить столько элементов, сколько хотите.

Пример

<div>
    <h1>I've a text in side heading with multiple lines. Want the spacing the two lines to increase, so I set a line-height. When I do this, not only does it increase space between the two lines, it also increases spacing above the first line.</h1>    
    <h1>I've a text in side heading with multiple lines. Want the spacing the two lines to increase, so I set a line-height. When I do this, not only does it increase space between the two lines, it also increases spacing above the first line.</h1>
</div>

body {padding:30px;background:yellow;border:1px solid red;margin:0}
div{background:red;margin:0;padding:0;border:1px solid green;}
h1{line-height:2em;}
div > h1:first-child{
    margin-top:-.25em;
}
div > h1:last-child{
    margin-bottom:-.25em;
}