为什么顺风网格div的子级继承其兄弟姐妹的类，例如填充和边距？

Question

<div class="grid grid-cols-3 gap-2">
  <div class="children-1 col-span-1 p-4 border rounded-md flex justify-center items-center bg-red-600 text-white">Hello</div>
  <div class="children-2 col-span-1 p-0 border rounded-md flex justify-center items-center">world</div>
  <div class="children-3 col-span-1 p-0 border rounded-md flex justify-center items-center">again</div>
</div>

在此提供的代码中，为什么children-2和children-3继承了children-1的“p-4”类，而不继承children-1的“bg-red-600”和“text-white”类？我真正想要的是这三个兄弟姐妹的不同填充。

Answer 1

它不会继承第一项本身的

p-4

。例如，您可以通过将第二个元素设置为

p-8

来看到这一点。请注意，所有元素都会拉伸以填充最高元素的高度。这就是网格的工作原理。

现在，如果您想查看元素完全具有您设置的填充，您可以向父容器添加

items-center

。这将使您的元素垂直居中对齐。您不妨尝试

items-start

或

items-center

看看它有什么变化。