为什么我的 CSS column-span 元素不尊重上面列中块的边距底部？

Question

我有一个带有段落的多列 div，我需要任何段落簇中的最后一个段落以底部的空格结尾。目前，我在p 上使用margin-bottom 来实现这一点，然后在p+p 上使用相同的负数margin-top。这一切都很好。然后，我在这些段落下方添加了一个跨列 div。出于某种原因，扳手似乎忽略了第一列中段落的margin-bottom，这意味着如果列不平衡，我的 div 会忽略间距（实际上是在 如果您在 Chrome 检查器中查看它的边距），则与上面的段落相近。是否有一些干净的解决方案来获得一致的间距？您可以在此处的 sn-p 中看到这种情况：

.container {
  column-count: 2;
  border: solid black 1px;
  width: 200px;
}

.spanner {
 background-color: #aaf;
 column-span : all;
}

p {
 margin-top   : 0px;
 margin-bottom: 20px;
 padding      : 5px;
 background-color : #ffa;
}

p+p {
 margin-top: -20px;
}

<b>Balanced columns are fine:<b>

<div class="container">
  <p>1 1 1 1 1 1 1 1 1 1 1</p>
  <p>2 2 2 2 2 2 2 2 2 2 2</p>
  <p>3 3 3 3 3 3 3 3 3 3 3</p>
  <p>4 4 4 4 4 4 4 4 4 4 4</p>
  <p>5 5 5 5 5 5 5 5 5 5 5</p>
  <p>6 6 6 6 6 6 6 6 6 6 6</p>

  <div class="spanner"> span the whole column, bro. </div>
</div>
<br>
<br>

<b>Unbalanced columns ruin my life:<b>

<div class="container">
  <p>1 1 1 1 1 1 1 1 1 1 1</p>
  <p>2 2 2 2 2 2 2 2 2 2 2</p>
  <p>3 3 3 3 3 3 3 3 3 3 3</p>
  <p>4 4 4 4 4 4 4 4 4 4 4</p>
  <p>5 5 5 5 5 5 5 5 5 5 5</p>

  <div class="spanner"> span the whole column, bro. </div>
</div>

编辑：添加了额外的上下文，因为建议的答案并不能完全解决我的问题。

Answer 1

这是 chrome 问题。它应该在Firefox中工作。试试下面的CSS for chrome：

.container {
  column-count: 2;
  border: solid black 1px;
}

.spanner {
 background-color: #aaf;
 column-span : all;
}

p {
 margin-top   : 0px;
 margin-bottom: 10px;
 padding      : 5px;
 background-color : #ffa;
 display: inline-block;
 width: 100%;
}

您可以使用 spanner 类将 margin-top 添加到 div 以实现您的要求。

.container {
  column-count: 2; 
  border: solid black 1px;
  width: 200px;
}

.spanner {
 background-color: #aaf;
 column-span : all;
 margin-top: 20px;
} 

p {
 margin-top   : 0px;
 margin-bottom: 0px;
 padding      : 5px;
background-color : #ffa;
}