显示网格 <p> 行与网格 <div> 行 [重复]

Question

为什么网格行 <p> 与网格行 <div> 不同？

对不起，如果这是显而易见的事情，但对我来说没有任何意义 XD

.container {
  display: grid;
  grid-auto-rows: 20px;
  grid-auto-columns: auto;
  grid-row-gap: 5px;
}

.box {
  display: block;
  border: 1px solid black;
  background-color: lightgreen;
}

<div class="container">
  <p class="box">test</p>
  <div class="box">test</div>
  <div class="box">test</div>
</div>

Answer 1

使用<p> 和<div> 之间的最大区别过去是您不能像使用<div> 那样在<p> 中嵌套其他元素。然而，<p> 标签在 HTML5 中似乎变得更加宽容，这使得它可以被允许 - 任何短语元素（包括图像和其他 <p> 标签）都可以正常工作。在 MODERN DAY 中选择一个而不是另一个的主要原因是 1）它标志着语义上的差异，使代码对其他人更具可读性，以及 2）<p> 默认情况下在段落上方和下方添加一个边距，而<div>不增加额外边距。

Answer 2

p 元素的 height 为 0。我不完全确定原因，但网格 container 的 grid-auto-rows 规则导致了它。没有它，p 会膨胀到 50px 高度，包括填充。

这个填充是浏览器设置的。我喜欢使用css reset。它们是简单的 CSS 规则，可以解决这些默认样式导致的常见问题。其中有几个，人们出于不同的原因喜欢不同的重置。 I rather like this one

编辑：固定代码 sn-p。

.container {
  display: grid;
  grid-auto-rows: 20px;
  grid-auto-columns: auto;
  grid-row-gap: 5px;
}

.box {
  display: block;
  border: 1px solid black;
  background-color: lightgreen;
  margin: 0;
  padding: 0;
}

<div class="container">
  <p class="box">test</p>
  <div class="box">test</div>
  <div class="box">test</div>
</div>