为什么grid-row-gap与grid-column-gap不同？

Question

我正在学习如何使用网格。我已经将grid-column-gap和grid-row-gap都设置为10px，但是，如您所见，这两个间隙的大小不同。为什么会这样？

正如我从以前的线程中读到的建议一样，我试图在p上添加margin：0。当我这样做时，grid-column-gap和grid-row-gap看起来大小相同，但是主容器的粉红色消失了，为什么呢？这里是codepen https://codepen.io/Alicinetto/pen/NVqqmo

的链接

.container {
  background: pink;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

main>p {
  background: #fff;
  padding: 20px;
  margin: 0;
}

<main class="container">
  <p>
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
    sit aspernatur aut odit aut fugit,</p>
  <p>sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam
    quaerat voluptatem.</p>

</main>

Answer 1

这是因为<p>元素具有浏览器默认样式表应用的本机顶部和底部边距。如果您在margin: 0元素上设置了<p>，那么问题将消失。

main>p {
  background: #fff;
  padding: 20px;
  margin: 0;
}

如果您想在容器与其内部<p>元素之间保持一定的距离，请在10px上设置.container填充：

.container {
  background: pink;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  padding: 10px;
}

main>p {
  background: #fff;
  padding: 20px;
  margin: 0;
}

<main class="container">
  <p>
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
    sit aspernatur aut odit aut fugit,</p>
  <p>sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam
    quaerat voluptatem.</p>

</main>

Answer 2

这些段落在底部有空白。如果您添加

p {
  margin: 0;
}

行间距相同。