CSS: верхний край шрифта

Я знаю, что название этого вопроса глупо, но я не мог придумать ничего лучшего. Я искал несколько часов на эту тему, но либо искал что-то неправильно, либо я пропустил некоторые основы CSS.

У меня есть контейнер div с фоном 40x40px, размещенным в верхнем левом углу. Я хочу выровнять верхнюю часть текста с тега h2 с вершиной этого фонового изображения, которое я пытался сделать следующим образом.

HTML:

<div id="container">
  <h2 id="title">Lorem</h2>
</div>

CSS

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}

#container {
    background: url('test-icon.png') top left no-repeat;
    margin: 200px auto; /* To center the container on the page*/
    min-height: 50px;
    padding-left: 50px; /* To prevent the text from "colliding with the background-image"*/
    width: 300px;
}

#title {
    font-family: "Arial Black", Arial, Helvetica, sans-serif;
    font-size: 1.3em;
    text-transform: uppercase;
}

Я использовал Eric Meyers CSS reset, чтобы избавиться от конкретных стилей браузера, но оставил это в приведенном выше коде.

Я создал живой пример

Проблема заключается в том, что фоновое изображение и верхняя часть текста из h2-тега не выравниваются - в верхней части тега h2 имеется небольшое "поле". Это значение, по-видимому, меняется с размером шрифта. Когда я использую инспектор Google Chromes, он сообщает мне, что маржа и дополнение к тегу h2 и div - все 0px. Поскольку браузеры визуализируют шрифты по-разному, я не хочу обходиться с отрицательными полями, если он разбивает макет. Есть ли способ "безопасно" избавиться от этой границы? Чтобы быть абсолютно ясным, я хочу, чтобы это было this.

Ответ 1

Я думаю, что ваша проблема - line-height на <h2>. Немного возиться вокруг говорит мне, что вы хотите, чтобы это было:

line-height: 10px;

Возможно, вам понадобится px для font-size, чтобы заставить вещи работать последовательно в разных браузерах.

Ответ 2

Вы пробовали линию-высоту: 1;