Объясните пожалуйста, как здесь реализована высота строки....? CSS3

То, что я хочу спросить: "не должно быть line-height иметь значение 3em в h2. как это на самом деле работает. Когда я устанавливаю set font-size:2em и line-height:3em, он не находится в центре по вертикали. Как может быть высота строки:1.5 держит текст в центре заголовка?"

html{
  font-size:10px;
}

h2{
  margin:0;
}

.card{
  width: 35em;
  height: 22em;
  margin: 05em auto;
  background-color: red;
}

.card header{
  height: 3em;
  padding: 1em;
  background: orange;
}

.card header h2{
  font-size:2em;
  line-height: 1.5em;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<section class="card">
  <header>
    <h2>This is Header</h2>
  </header>
  
</section>
</body>
</html>

Источник

1 ответ

Я понял это сам. проблема здесь

.card header h2{
  font-size:2em;
  line-height: 1.5em;
}

Размер базового шрифта установлен на 10 пикселей. поэтому, когда я устанавливаю font-size:2em, это означает, что font-size имеет значение "20px", поэтому, когда line-height установлен на 1.5em, он принимает текущее значение font-size, равное 20px (2em), поэтому теперь line-height:1,5em означает 1,5 из 20px, что составляет 30px.

вкратце: em относится к локальному значению размера шрифта сначала к родительскому, а затем к глобальному.

Источник
Другие вопросы по тегам