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>之间的最大区别是，您无法像使用<p>那样在<div>内嵌套其他元素。但是，<p>标签似乎在HTML5中变得更加宽容，这是允许的-任何短语元素（包括图像和其他<p>标签）都可以正常工作。在MODERN DAY中相互选择的主要原因是：1）它标志着语义上的差异，使代码更易于他人阅读； 2）<p>默认在段落的上方和下方添加了一个空白，而{ {1}}不增加任何边距。

Answer 2

height元素的p为0。我不确定原因为何，但是网格grid-auto-rows的{{1}}规则是导致它的原因。如果没有它，container会升至50px高，包括填充。

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

编辑：固定代码段。

css reset

.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;
}

显示网格<p>行与网格</p> <div>行

2 个答案: