为什么我在网格行中有额外的 space？

Question

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

但由于某些原因，第一行在 h2 之后多了 space。我复制了 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;
}

您在此处使用的边距 shorthand 是：

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

（按此顺序）。您的标题下方有 1em 个边距。那会在 header 之后放一个 space。只需将其替换为 margin: 0;。或者，如果您想保留段落的边距，请将 h2 移动到另一个 CSS 声明。

为什么我在网格行中有额外的 space？

Why do I have extra space in a grid row?

css

grid-layout

css-grid