css - 为什么我在网格行中有额外的空间？

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 声明。