为什么在网格行中有多余的空间？

Question

我正在尝试像此处的第一个示例一样重新创建媒体对象https://codepen.io/rachelandrew/pen/zwMZVy

但是由于某种原因，h2之后的第一行有多余的空间。我复制了CSS以查看是否可行，但没有成功。我希望p正好在示例中，位于h2下方。

    .img {grid-column: 1;
          grid-row: span 2}

    h2 {grid-column: 2;
        grid-row: 1;}

    p {grid-column: 2;
       grid-row: 2;}

    footer {grid-column: 1 / -1;
            grid-row: 3;}

    .wrapper {border: 2px solid lightgrey;
              padding: 20px;
              display: grid;
              grid-column-gap: 10px;
              grid-template-columns: 150px 3fr;
              grid-template-rows: auto 1fr auto;}

    img {max-width: 100%;
        height: auto;
        display: block;}

    h2,
    p {margin: 0 0 1em 0;}

<div class="wrapper">
   <div class="img">
    <img src="https://images-na.ssl-images-amazon.com/images/I/71ykS5obm%2BL._SY355_.jpg">
  </div>
  <h2>Header</h2>
  <p>Content</p>
  <footer>Footer</footer>
</div>

Answer 1

h2,
p {
  margin: 0 0 1em 0;
}

您在此处使用的保证金速记为：

h2,
p {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 1em;
  margin-left: 0;
}

（按该顺序）。您的标题下有1em边距。那将在标题之后留一个空格。只需将其替换为margin: 0;。或者，如果要保留段落的边距，请将h2移至另一个CSS声明。