我认为自己是一个相当有经验的CSS用户，但这个问题困扰了我.我有一个基本的CSS设置，我希望以一种可预测的方式工作.
.grid {
display: grid;
}
.card > div {
border-left: 1px solid black;
height: 100%
}<div class="grid">
<a class="card" href="https://example.com">
<div>
<p>
Hello Stackoverflow! There is 2em of margin below me!
</p>
</div>
</a>
</div>请注意一个有趣的行为，p的底部边距似乎是2em，而不是下面的合理预期
- 顶部
1em，底部1em 0em
这让我措手不及，所以我把这些价值观搞砸了.这才是真正有趣的地方
- 移除
display: grid:2em，底部下降至0 - 移除
height: 100%:底部的2em下降到0 - change
border-lefttoborder: 顶部1em，底部1em
当我们移除a并调整我们的类以匹配它时(内部div变成.card)
- Patterns are normal but still confusing
- Usually 顶部
1em，底部1em
- Usually 顶部
-
border-left->；border:什么都不会改变 -
height: 100%:什么都不会改变 - 删除
display: grid:使边缘0
这到底是怎么回事？inspect工具没有显示任何信息，如果有任何信息的话，它会让问题变得更加混乱.div与锚的偏移量为1em，但原因尚不清楚
理想情况下，边距是0(没有display: grid样式)，但我可以接受两边都是1em.我很好奇为什么会发生这种行为，以及我能做些什么来否定它.
谢谢巫师们！
