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

Question

我有一个包含段落的多列div，我需要任何段落簇中的最后一段以底部的空格结束。目前，我在p上使用margin-bottom，然后在p+p上使用相等的负margin-top来实现这一点。这一切都很好。然后，我在这些段落下面添加一个跨越div的列。出于某种原因，扳手似乎忽略了第一列中段落的margin-bottom，这意味着如果列不平衡，我的div会忽略间距(事实上，如果你在Chrome检查器中查看它，它会被绘制在页边空白的顶部(，聚集在上面的段落附近。有没有一些干净的解决方案来获得一致的间距？你可以在这里的片段中看到这种情况：

.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

这是铬问题。它应该在firefox中工作。试试下面的铬CSS：

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

您可以使用扳手类将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;
}