Выравнивать элементы блока сверху при использовании высоты линии

Если я даю line-height блоку , например h1, он добавляет пробел выше и ниже каждой строки текста, что означает, что элемент не начинается в том же верхнем положении. Что делать, если я просто хочу промежуток ниже каждой строки? Я знаю, что vertical-align работает только с встроенными элементами.

Я также признал, что текст элемента блока, такого как тег p, по умолчанию не соответствует высоте строки "normal". Если я добавлю цвет фона к элементу, цвет также будет отображаться на несколько пикселей выше текста. Почему?

Ответ 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 пикселя пространства выше и ниже каждой строки, отрицательное вертикальное позиционирование будет похоже на то, что дополнительный верхний интервал был отключен.