CSS多列布局页边距问题

我有一个基于css的2列布局

.mainContentSection {
  font-size: 1.1em;
  margin: 20px 10px 10px;
  padding: 0;
  -moz-column-count: 2; /* Firefox */
  -webkit-column-count: 2; /* Safari and Chrome */
  column-count: 2;
  -moz-column-gap:30px; /* Firefox */
  -webkit-column-gap:30px; /* Safari and Chrome */
  column-gap:30px;
}

.mainContentSection p {
  margin: 0 0 20px 0;
  padding: 0;
  border: 1px solid gray;
}

有时，第二列的顶部会抓住上一段底部的空白。这将向下推下下一段的顶部，如所附图片所示。我试过打破内部，改变边距，内联块。所有这些都取得了一些成功，但不是最佳的。我可以访问第二列删除该页边距吗

---

只是不要在

.mainContentSection

元素上使用上页边距，因此

页边距

行应为：

页边距：0 10px 20px 10px

.mainContentSection {
  font-size: 1.1em;
  margin: 0 10px 20px 10px;
  padding: 0;
  -moz-column-count: 2; /* Firefox */
  -webkit-column-count: 2; /* Safari and Chrome */
  column-count: 2;
  -moz-column-gap:30px; /* Firefox */
  -webkit-column-gap:30px; /* Safari and Chrome */
  column-gap:30px;
}

我对Safari也有同样的问题。
在列项目上添加
display:inline block
，解决了我的问题。
我想我参加聚会有点晚了，但由于没有公认的答案，这是我的

在讨论这个问题之前，尽管它不应该影响您的问题，但强烈建议始终应用列宽和列计数值，以获得更好的响应结果

columns: [minimum width] [column count]

一旦这样说了，只需添加您的
页边距（页边距：0 0 20px 0；）就完全可以了，这是避免任何麻烦的方法。你只需添加
break-inside:avoid
应考虑到以下三点：

“内部打断”应用于内容元素，而不是父容器
打破浏览器内部的兼容性依赖于不同的格式，而不仅仅是前缀
动态更改其值（例如，从浏览器的“检查器”面板）时，“内部打断”会出现问题
也许这三条建议就是你的尝试未能实现目标的原因。
因此，您需要的代码如下所示：

.mainContentSection p {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  margin: 0 0 20px 0;
  padding: 0;
  border: 1px solid gray;
}

如果您想查看一个工作示例，您可以在这支笔中执行此操作：
问题的根源似乎是在使用
列计数时，浏览器根据元素的偶数或奇数对
边距和
填充进行不同的处理

这意味着解决方案，如
display:inline block；宽度：100%
；或使用
边距
或
填充
创建不一致的结果

解决方案
我发现，要使这一点在浏览器中保持一致，唯一的方法是添加一个
父元素
和一个
间隔符
。然后使用
break-inside:avoid
将两个元素保持在一起

HTML
您可以将
padding
添加到
mainContentSection
或在段落上方添加另一个
spacer
，具体取决于您需要的空间

问题
不一致的对齐似乎是由于对偶数或奇数个元素的
边距
和
填充
处理不同而导致的。我发现这对于
-top
和
-bottom
是正确的，但为了保持简单，我在示例中只使用
边距底部

偶数个元素（工作正常）
当元素数为偶数时，
margin-bottom
起作用


奇数个元素（不起作用）
当有奇数个元素时，
页边距底部
会移动到第二列，从而产生错位


其他解决方案
这意味着仅仅使用
margin
或
padding
会导致浏览器和设备之间的结果不一致

使用
显示：内联块；宽度：100%
几乎可以工作，但我发现对于某些浏览器/设备变体，如果只有两个元素，它会将两个元素保留在一列中，因为没有中断。这可以通过添加建议的中断来解决，但正如用户所提到的，如果元素高度不同，结果似乎不一致。
此屏幕截图是在Chrome中拍摄的。这不是一种持续发生的情况。这就是我拍快照的原因。当我试图修复它时，这个问题出现了，消失了，又出现了。例如，我将p显示更改为inline block，它将整个断开的p吸入到第二列。一个解决方案，但不是我喜欢的。我解开了显示器上的零钱，问题就解决了。它迟早会回来的。我也在其他网站上看到过。我有一个来自不同网站的截图，但似乎无法发布。这是一个经常发生的问题。谢谢你，但这并没有影响p传递到第二列的边距或填充。目前Safari上除外。在我的情况下，我还必须切换到填充。（如果您的元素有背景或边框，请删除它们的边距并将它们包装在带有填充的div中。）旧Safari版本10之前不支持内部打断，仅支持前缀属性-webkit break-inside:auto/always，因此不支持避免。在那个版本之后应该没有问题。但是，如果有，可能@Robinwebdev建议的display:inline块会修复它。
<div class="mainContentSection">
  <div class="parent-element">    <!-- added this element -->
    <p>Blah blah blah blah</p>
    <div class="spacer"></div>     <!-- added this element -->
  </div>
  <div class="parent-element">   
    <p>Blah2 blah2 blah2 blah2</p>
    <div class="spacer"></div>   
  </div>

  <!-- addition items... -->

</div>

.mainContentSection{
  column-count:2
}
.parent-element{
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}
.spacer{
  height: 10px;
}