Ответ 1
TL;DR: используйте position: relative
и отрицательное верхнее значение, чтобы подделать его.
Объяснение: Вы правы. Высота линии всегда добавляется выше и ниже каждого символа. Так что если ваш размер шрифта составляет 12 пикселей, а у вас есть высота строки 18 пикселей, вы получите 3px выше и 3px под каждой "линией". Каждое из этих пространств 3px называется "половинным".
Однако вы можете использовать position: relative
с отрицательным верхним значением, чтобы он казался таким, что под каждой строкой добавляется только пространство.
Итак, скажем, вы хотели иметь 8px пространства между каждой строкой, а не только 6px из приведенного выше примера (18px/12px = 6px = 3px сверху + 3px внизу). Для этого увеличьте высоту линии от 18px до 20px, чтобы сделать половину ведущего 4px и дать в общей сложности 8px пробела между строками. Затем добавьте position: relative; top: -2px
, чтобы вернуть строку обратно в то место, где она была, когда высота строки была 18px.
Несмотря на то, что браузер все еще добавляет 4 пикселя пространства выше и ниже каждой строки, отрицательное вертикальное позиционирование будет похоже на то, что дополнительный верхний интервал был отключен.