html - h1 在 firefox 的网格布局中具有空大小

Question

我正在尝试使用网格布局在标题、firefox 浏览器 (v 63.0) 以及 chrome (v 70.0.3538.77) 中显示我的元素，并且所有这些都正确显示，除了尽管单元格对他来说足够大，但 h1 以某种方式保持空大小(但仍然可见，请参阅屏幕截图以了解更多详细信息)(我已经通过将其放在网格之外并检查其大小进行了测试。)

这是 html(在 pug 中)

link(rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous")
link(rel="stylesheet" href="/style/header.css")

header
  h1 3615 MyBlog
  div.innerGrid
      h1 3615 MyBlog
      span.subline Node.js is cool!
      span.admin
          i.fas.fa-cog
          |Administration

和header.css

body{
    margin: 0;
}

header{
    width: 100vw;
    height: 100px;
}

.innerGrid{
    width: 90vw;
    height: 90%;
    display: grid;
    margin: auto;
    grid-template-columns: 200px auto 200px;
    grid-template-rows: 10px 40px 20px 20px auto;
    grid-template-areas:
            ". . ."
            "title . button"
            ". . ."
            "subline . ."
            ". . .";
}

.innerGrid h1{
    grid-area: title;
}

.innerGrid .subline{
    grid-area: subline;
}

.innerGrid .admin{
    grid-area: button;
}

.innerGrid {
  border: 1px solid black;
}

.innerGrid > * {
  border: 1px solid red;
}

如您所见，子线和按钮的行为符合预期，但网格外的 h1 大小为 38.4px(在我的计算机上)，但网格中的 h1 大小为 0px(而它应该在其中的单元格大小为 40px，明显优于 38.4px)。

edit : 在 css 中添加截图和边框以显示问题

感谢您的帮助。

Answer 1

问题很可能来自 h1 具有由浏览器设置的默认边距，因此不像您的 span 那样没有任何边距。重置默认边距和填充是常见的做法，请参阅 this link .在您的情况下，您也可以简单地重置此特定元素的边距，如下所示:

.innerGrid h1 {
    margin: 0;
}