Ответ 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;
}