0

我想问的是“不应该是行高在 h2 中的值为 3em。它实际上是如何工作的。当我设置 set 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>

4

1 回答 1

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 表示 20px 的 1.5，即 30px。

简而言之： em 指的是本地字体大小值，然后是父级，最后是全局。

于 2018-11-03T15:13:56.170 回答