Html 使用column count css标记时文本列的垂直对齐？

我使用CSS column count标记在HTML页面上将一些文本分成四列

第一列在垂直方向上总是比其他三列低一点

我已经把它归结为一个最简单的例子，你可以在下面看到，或者在中看到

为什么第一列的顶部有额外的空间？如何使它们对齐

。列文本{
列数：4；
柱间距：10px；
列规则：1px虚线#d5d5；
字体大小：大号；
}

为什么我比你低

废话废话

废话

废话废话

废话

废话废话

废话

废话废话

在第一段添加了一个空白。您可以通过将此行添加到CSS:

.column text div:first child p:first child{margin:0；}

。列文本{
列数：4；
柱间距：10px；
列规则：1px虚线#d5d5；
字体大小：大号；
}
.列文本div:first child p:first child{
保证金：0；
}

为什么我比你低

废话废话

废话

废话废话

废话

废话废话

废话

废话废话

这是标签的垂直边距。在其他情况下，它们会折叠-这是margin的标准行为。

在js fiddle中，其他容器的margin看起来有点重叠父容器

你可以试试这个

.column-text p {
  display: inline-block;
}

---

这将使它们看起来都一样

谢谢，这很有效。为什么在第一段加了一个空白？这只是列计数的一个“特性”吗？是的，这是一个默认的边距行为。很高兴它成功了，如果这解决了你的问题，请将它标记为anwser。很高兴！你知道为什么这种默认保证金行为只影响第一个，而不影响其他人吗？它们没有重叠，这是一种默认保证金行为。为什么要把一个段落改成一个内联表格，这会引起它本身的问题呢？我很感激你的回答，但这并不能解决问题。是的，我把它改成了内联块。内联块确实去掉了边距，但它的副作用是将文本的不同列包装在一起。这很公平，但为什么它只影响第一个呢？@JosephStyons这适用于所有人。在“开发人员”面板中查看代码执行的结果，其中显示块大小。