CSS: Верхнее поле шрифта

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

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

HTML:

  
Lorem

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;
}

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

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

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