1em不是真的1em？我的文字对我的div来说太大了

Question

我正在为一个项目做一些CSS，并且遇到了这个非常奇怪的事情。正如您从屏幕截图中看到的那样：

我的文字实际上来自他的div，而不是坐在div的基线上。

导致这种情况的原因是什么？

我还提供了可能派上用场的相关CSS。

element.style {
}
#page-title {
color: #84ae2d;
font-family: 'futurama';
font-size: 40px;
text-transform: uppercase;
line-height: 1em;
height: 1em;
}
.page__title, .node__title, .block__title, .comments__title, .comments__form-title, .comment__title {
margin: 0;
}
h1 {
font-size: 2em;
line-height: 1.5em;
margin-top: 0.75em;
margin-bottom: 0.75em;
}
user agent stylesheeth1 {
display: block;
font-size: 2em;
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
Inherited from div#content.column
#header, #content, #navigation, .region-sidebar-first, .region-sidebar-second, #footer {
padding-left: 10px;
padding-right: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
_display: inline;
_overflow: hidden;
_overflow-y: visible;
}
Inherited from html.js
html {
font-family: Verdana, Tahoma, "DejaVu Sans", sans-serif;
font-size: 75%;
font-size: 87.5%;
font-size: 100%;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
line-height: 1.5em;
}

非常感谢！

Answer 1

试试这个

用此

替换h1

h1 {
font-size: 1.5em;
line-height: 1.5em;
margin-top: 0.75em;
margin-bottom: 0.75em;
}

您的行高为1.5em，但字体大小为2em

您的字体大小，行高应与此font-size: 1.5em; line-height: 1.5em;

相同