объясните, пожалуйста, как здесь реализована line-height? css3

то, что я хочу спросить, это «не должно быть line-height иметь значение 3em в h2. как это на самом деле работает. когда я устанавливаю font-size: 2em и line-height: 3em, он не находится в центре по вертикали. Как может быть line-height: 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>


padding css font-size ems
person Ahmad Malik    schedule 02.11.2018    source источник
comment
Предпочитать безразмерные числа для значений высоты строки из MDN   -  person FelipeAls    schedule 02.11.2018

Ответы (1)


arrow_upward
1
arrow_downward

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

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

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

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

person Ahmad Malik    schedule 03.11.2018