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

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

0 голосов
/ 02 ноября 2018

я хочу спросить: «не должно быть 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 Ответ

0 голосов
/ 03 ноября 2018

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

.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 относится к локальному значению размера шрифта сначала к родительскому, а затем к глобальному

...