网格行高比定义的大答案

【问题标题】：Grid row height gets bigger than defined网格行高比定义的大
【发布时间】：2019-07-11 23:32:04
【问题描述】：

我在另一个网格中嵌套了一个网格，并将内部网格 (#content) 的列和行的大小定义为 1fr。

但是当我添加文本时，列显示正常，但行高变大，因此整个容器本身变大。

我认为是因为字体高度大于 1fr，但行的高度甚至大于字体大小。

为什么行高会改变？

附：当我将行大小设置为自动时，一切正常，但我不明白为什么 1fr 在这种情况下不起作用，以及在这种情况下是什么定义了行的确切高度。

Codepen：https://codepen.io/s4ek1389/pen/gqZvRZ

HTML：

<html>
  <body>
    <div id="container">
      <div id="content">
        <div id="label">Author</div>
      </div>
       <div id="image"></div>
    </div>
  </body>
</html>

CSS：

body {
  background-color: #A9E5BB;
  margin: 0;
}

#container {
  display: grid;
  grid-template-columns: repeat(50, minmax(2vw, auto));
  grid-template-rows: repeat(50, minmax(2vh, auto));
}

#content {
  display: grid;
  grid-template-columns: repeat(50, 1fr);
  /* Please take a look at the line below. */
  grid-template-rows: repeat(50, auto);
   /* Please take a look at the line above. */
  grid-column: 11/41;
  grid-row: 8/44;
  background-color: #2D1E2F;
}

#image {
  display: grid;
  background-color: #F7B32B;
  grid-column: 13/23;
  grid-row: 4/48;
}

#label {
  color: white;
  grid-column-start:36;
  grid-row-start: 10;
}

【问题讨论】：

标签： html css css-grid

【解决方案1】：

我发现了问题：<p> 元素有一个默认边距。覆盖它们后一切正常。

【讨论】：