标题元素，高度不能正常工作

Question

我希望标题是4em ..但是它更小了 为什么呢？

我的HTML是：

    <header id="header">
        <div class="content">
            <h1><?php echo $pageTitle; ?></h1>
        </div>
    </header>

我的css是：

header#header{
    background-color: #e9e9e9;
    height: 4em;
}

#header#header .content{
    max-width: 1200px;
    margin: 0 auto;
    height: 4em;
}
#header h1{
    margin: 0;
    padding: 0;
    height: 4em;
    font: bold 1.5em/4em arial;
}

Answer 1

em单位取决于父字体大小，默认情况下元素的字体大小为16px 因此，如果您放置4em表示16 * 4 = 64px。 您需要选择更大的数字