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

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