Aligning текстовый блок с верхней части контейнера

Question

Я пытаюсь добиться эквивалентной из (я знаю, что это на самом деле не допускается в CSS):

{padding-top : -3x }

В этой оригинальной fiddle вы можете увидеть, что Я хочу, чтобы мое h2-содержимое было выровнено с самой верхней и нижней частью закрывающего элемента блока.

My -ve margin-left работает, но a -ve margin-top перемещает охватывающий элемент вверх (принимая с собой h2). Я хочу, чтобы белые буквы истекали кровью в фоновом режиме, поэтому мне нужно было переместить текст в верхнюю часть закрывающего элемента блока и надежно установить вертикальную высоту <header>, чтобы нижний край также вливался в фон. До сих пор это очень пробная ошибка, которая, как я подозреваю, будет означать, что она не работает в других браузерах, но я не могу найти какие-либо опции css, которые лучше работают.

На основе первых двух первых двух ответов, я обновил fiddle, но я все еще остается с 3em шрифта и 2.05em линии высоты для контейнера (и, услышав, что вы должны не вообще добавьте единицы к высоте линии, а также, что приведет меня к line height of 0.7) и интересно, является ли это надежными отношениями (и если да, то как это выражается математически) во всех ситуациях, включая мобильные телефоны?

Answer 1

Почему бы просто не использовать Сан-Serif, как Arial .. см Fiddle

#experience { 
    background-color: black; 
    position: relative; 
    margin: 0em 0; 
    line-height: 2.05em; 
} 
#experience h2 { 
    color: white; 
    text-transform: uppercase; 
    margin-left: -5px; 
    font-family: "Arial";  
    font-weight: bold; 
    font-size: 3em; 
    letter-spacing: 0.1em; 
} 

Приветствия Адам