网格、边框和锚点样式的奇怪行为

Question

我认为自己是一个相当有经验的 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 Whosebug! There is 2em of margin below me!
      </p>
    </div>
  </a>
</div>

请注意有趣的行为，其中 p 的底部边距似乎是 2em 而不是以下合理的预期

1em在上面，1em在下面
0em

这让我措手不及，所以我对这些值进行了一些改动。这就是真正有趣的地方

删除 display: grid：底部的 2em 下降到 0
删除height: 100%：底部的2em下降到0
将 border-left 更改为 border：1em 在顶部，1em 在底部

当我们删除 a 并调整我们的类以匹配它时（内部 div 变为 .card）

模式正常但仍然令人困惑
- 通常1em在上面，1em在下面
border-left -> border：没有任何变化
height: 100%：没有任何变化
删除display: grid：保证金0

这到底是怎么回事？检查工具没有显示任何内容，如果有的话，它会使问题更加混乱。 div 与锚点偏移 1em，但不清楚为什么

理想情况下，边距是 0（w/o display: grid 样式），但我可以满足于两边均等的 1em。我很好奇为什么会发生这种行为以及我可以做些什么来消除它。

谢谢各位大侠！

Answer 1

哇哦，这是一些奇怪的行为。

看起来 p 上的 margin-top 从网格的顶部流出但是网格正在计算它自己的高度基于包括那个边距，所以它看起来像 p 有一个 margin-bottom 那是 2em 而不是 1em （虽然不是）。

这是一种奇怪的行为，但我认为这与 margins collapse with adjacent elements.

的方式有关

我们可以通过将 display: inline-block 添加到 p 元素来确认这一点（这可以防止它折叠边距）。

内联块

既然我们知道发生了什么，该怎么办？

如果您可以接受 p 上的 display: inline-block，那么就可以了。否则你可以取消边距（p { margin: 0 }）并用填充替换它。

填充而不是边距

Answer 2

第一个子选择器和最后一个子选择器对此很有用。

例如：删除边距

.grid {
  display: grid;
}

.card > div {
  border-left: 1px solid black;
  height: 100%;
}

.card > div :first-child {
  margin-top: 0;
}

.card > div :last-child {
  margin-bottom: 0;
}

<div class="grid">
  <a class="card" href="https://example.com">
    <div>
      <p>
        Hello Whosebug! There is no margin below me!
      </p>
    </div>
  </a>
</div>

或者：带填充的假边距

.grid {
  display: grid;
}

.card > div {
  border-left: 1px solid black;
  height: 100%;
}

.card > div :first-child {
  margin-top: 0;
  padding-top: 1em;
}

.card > div :last-child {
  margin-bottom: 0
  padding-bottom: 1em;
}

<div class="grid">
  <a class="card" href="https://example.com">
    <div>
      <p>
        Hello Whosebug! There is 1em of "margin" below me!
      </p>
    </div>
  </a>
</div>

网格、边框和锚点样式的奇怪行为

Odd behavior with grid, border, and anchor styling

html

css

css-grid

内联块

填充而不是边距